/*
 * MAW Starter — design tokens.
 * Every color/space/type/radius value in the theme reads from these variables.
 * Re-skin a project by overriding tokens (theme config writes a few inline, or use css/custom.css).
 * Layer order is declared here once; custom.css is unlayered so it always wins.
 */
/* layout comes after components so contextual shell rules (e.g. hiding .nav-toggle, a .btn) win */
@layer tokens, base, components, layout, blocks, utilities;

@layer tokens {
  :root {
    /* Brand (accent is overridden from theme config) */
    --maw-accent: #2563eb;
    --maw-accent-contrast: #ffffff;
    --maw-accent-soft: color-mix(in oklab, var(--maw-accent) 12%, var(--maw-bg));
    --maw-accent-hover: color-mix(in oklab, var(--maw-accent) 85%, black);

    /* Neutrals — light */
    --maw-bg: #ffffff;
    --maw-bg-alt: #f6f7f9;
    --maw-bg-inverse: #0f172a;
    --maw-surface: #ffffff;
    --maw-text: #0f172a;
    --maw-text-muted: #526075;
    --maw-text-inverse: #f8fafc;
    --maw-border: #e3e7ee;
    --maw-link: var(--maw-accent);
    --maw-focus: color-mix(in oklab, var(--maw-accent) 45%, transparent);

    /* Typography */
    --maw-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --maw-font-heading: var(--maw-font-body);
    --maw-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --maw-leading: 1.65;
    --maw-leading-tight: 1.15;
    --maw-text-xs: 0.8125rem;
    --maw-text-sm: 0.9rem;
    --maw-text-base: 1.0625rem;
    --maw-text-lg: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
    --maw-text-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.65rem);
    --maw-text-2xl: clamp(1.7rem, 1.4rem + 1.3vw, 2.25rem);
    --maw-text-3xl: clamp(2.1rem, 1.6rem + 2.2vw, 3.1rem);
    --maw-text-4xl: clamp(2.6rem, 1.8rem + 3.6vw, 4.4rem);

    /* Space scale */
    --maw-space-1: 0.25rem;
    --maw-space-2: 0.5rem;
    --maw-space-3: 0.75rem;
    --maw-space-4: 1rem;
    --maw-space-5: 1.5rem;
    --maw-space-6: 2rem;
    --maw-space-7: 3rem;
    --maw-space-8: 4rem;
    --maw-space-9: 6rem;
    --maw-section-sm: clamp(2rem, 1.5rem + 2vw, 3rem);
    --maw-section-md: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    --maw-section-lg: clamp(5rem, 3.5rem + 6vw, 9rem);

    /* Shape */
    --maw-radius: 0.625rem;
    --maw-radius-sm: calc(var(--maw-radius) * 0.6);
    --maw-radius-lg: calc(var(--maw-radius) * 1.6);
    --maw-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
    --maw-shadow: 0 4px 16px rgb(15 23 42 / 0.08);
    --maw-shadow-lg: 0 18px 48px rgb(15 23 42 / 0.14);

    /* Layout. Breakpoints (media queries can't read custom properties, so they're literal in the CSS):
       mobile ≤ 640px · tablet 641–960px · desktop ≥ 961px (also used by the `hide_on` block setting) */
    --maw-container: 72rem;
    --maw-container-narrow: 44rem;
    --maw-container-wide: 90rem;
    --maw-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
    --maw-header-h: 4.25rem;

    /* Motion */
    --maw-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --maw-duration: 180ms;

    color-scheme: light;
  }

  :root[data-theme="dark"] {
    --maw-bg: #0b1120;
    --maw-bg-alt: #111a2e;
    --maw-bg-inverse: #f8fafc;
    --maw-surface: #131d33;
    --maw-text: #e6eaf2;
    --maw-text-muted: #9aa7bd;
    --maw-text-inverse: #0f172a;
    --maw-border: #22304a;
    --maw-accent-soft: color-mix(in oklab, var(--maw-accent) 22%, var(--maw-bg));
    --maw-link: color-mix(in oklab, var(--maw-accent) 70%, white);
    --maw-shadow: 0 4px 16px rgb(0 0 0 / 0.35);
    --maw-shadow-lg: 0 18px 48px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }

  /* Radius presets (theme config: brand.radius) */
  :root[data-radius="none"] { --maw-radius: 0; }
  :root[data-radius="sm"]   { --maw-radius: 0.3rem; }
  :root[data-radius="lg"]   { --maw-radius: 1rem; }
  :root[data-radius="pill"] { --maw-radius: 1.5rem; }
}