/* =============================================================
   Lexora Store — Design Tokens  (css/tokens.css)

   Single source of truth for spacing, type, colour, radius,
   elevation and motion. Loaded FIRST, before every other sheet,
   so any stylesheet can build on it.

   Why this exists: the store had four disconnected token sets —
   --lex-* (header.css), --home-* (index.css, scoped to .home-page),
   --ux-* (ui-upgrade.css) and Tailwind's brand ramp — and no shared
   spacing or type scale at all. Every page therefore drifted from
   every other page. This file gives one scale for all of them.

   Additive by design: it introduces new custom properties and
   re-points the existing --lex-* colours at them. No computed value
   changes, so nothing shifts visually on adoption.
   ============================================================= */

:root {
  /* ---- Spacing: strict 4px grid -----------------------------
     Use these instead of arbitrary rem values. Restricting the
     scale is what makes unrelated pages feel like one product. */
  --space-0: 0;
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */

  /* ---- Type scale -------------------------------------------
     Eight sizes, three weights. Weight 300 is deliberately absent:
     it fails contrast on mobile and was being loaded unused. */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px — also the minimum for <input>,
                             below which iOS auto-zooms on focus */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  2rem;      /* 32px */
  --text-3xl:  3rem;      /* 48px */
  --text-4xl:  4rem;      /* 64px */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-normal: 1.6;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Brand ramp -------------------------------------------
     Anchored on the existing --lex-blue (#4f6bff) so adopting
     these tokens changes nothing on screen. */
  --brand-50:  #eef1ff;
  --brand-100: #dfe4ff;
  --brand-200: #c3cbff;
  --brand-300: #9da8ff;
  --brand-400: #7684ff;
  --brand-500: #4f6bff;  /* = --lex-blue */
  --brand-600: #3a52e6;
  --brand-700: #2c3fb8;
  --brand-800: #232f8f;
  --brand-900: #1d2670;
  --accent-violet: #6c63ff;  /* = --lex-violet */

  /* ---- Neutrals ---------------------------------------------
     Warm-cool greys that sit correctly next to the brand blue. */
  --neutral-0:   #ffffff;
  --neutral-50:  #f5f7ff;  /* = --lex-surface */
  --neutral-100: #eef1f8;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;  /* = --lex-muted */
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #1b1d28;  /* = --lex-ink */
  --neutral-950: #09090b;

  /* ---- Status ----------------------------------------------- */
  --status-success: #16a34a;
  --status-warning: #d97706;
  --status-danger:  #dc2626;
  --status-info:    var(--brand-500);

  /* ---- Semantic surface / text ------------------------------
     Reference these rather than raw ramp values, so dark mode is
     a token swap instead of a per-rule override. */
  --surface-page:     var(--neutral-50);
  --surface-raised:   var(--neutral-0);
  --surface-sunken:   var(--neutral-100);
  --border-subtle:    var(--neutral-200);
  --border-strong:    var(--neutral-300);
  --text-primary:     var(--neutral-900);
  --text-secondary:   var(--neutral-600);
  --text-muted:       var(--neutral-400);
  --text-on-brand:    var(--neutral-0);

  /* ---- Radius ------------------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;   /* = --lex-radius */
  --radius-full: 9999px;

  /* ---- Elevation ---------------------------------------------
     Four steps. More than four and surfaces stop reading as a
     coherent depth order. */
  --elev-1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --elev-2: 0 4px 12px rgba(15, 23, 42, 0.08);
  --elev-3: 0 12px 28px -8px rgba(15, 23, 42, 0.18);
  --elev-4: 0 24px 56px -20px rgba(15, 23, 42, 0.28);

  /* ---- Motion ------------------------------------------------
     Only ever animate transform and opacity. Everything else
     forces layout or paint on the compositor's critical path. */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ---- Layout ------------------------------------------------ */
  --layout-max: 1320px;
  --layout-gutter: clamp(1rem, 4vw, 2.5rem);

  /* Minimum comfortable touch target (WCAG 2.5.5 / iOS HIG). */
  --tap-min: 44px;
}

html.dark {
  --surface-page:   var(--neutral-950);
  --surface-raised: #131318;
  --surface-sunken: #0d0d11;
  --border-subtle:  rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);
  --text-primary:   #e4e4e7;
  --text-secondary: var(--neutral-300);
  --text-muted:     var(--neutral-500);

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --elev-2: 0 4px 12px rgba(0, 0, 0, 0.55);
  --elev-3: 0 14px 32px -10px rgba(0, 0, 0, 0.7);
  --elev-4: 0 28px 64px -22px rgba(0, 0, 0, 0.8);
}

/* Motion tokens collapse rather than disappear, so transitions that
   carry meaning (focus, disclosure) still resolve instantly. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}