/* ==========================================================================
   Design Tokens — 2026 Design System
   Palette: Linear / Vercel / Stripe inspired
   OKLCH colors · 4px spacing · Inter typography
   ========================================================================== */

@layer tokens {
  :root {

    /* ─────────────────────────────────────────────
       COLOR PRIMITIVES (OKLCH)
       Neutral: cool slate-gray (hue 250)
       Primary: indigo-violet (hue 258) — Linear-style
    ───────────────────────────────────────────── */

    /* Neutrals — cool slate */
    --color-neutral-0:   oklch(1 0 0);
    --color-neutral-50:  oklch(0.988 0.002 250);
    --color-neutral-100: oklch(0.972 0.004 250);
    --color-neutral-150: oklch(0.955 0.006 250);
    --color-neutral-200: oklch(0.928 0.008 250);
    --color-neutral-300: oklch(0.872 0.012 250);
    --color-neutral-400: oklch(0.762 0.016 250);
    --color-neutral-500: oklch(0.628 0.018 250);
    --color-neutral-600: oklch(0.508 0.020 250);
    --color-neutral-700: oklch(0.398 0.020 250);
    --color-neutral-800: oklch(0.298 0.018 250);
    --color-neutral-850: oklch(0.238 0.016 250);
    --color-neutral-900: oklch(0.188 0.014 250);
    --color-neutral-925: oklch(0.148 0.012 250);
    --color-neutral-950: oklch(0.118 0.010 250);
    --color-neutral-975: oklch(0.088 0.008 250);

    /* Primary — indigo (Linear-style) */
    --color-primary-50:  oklch(0.962 0.018 258);
    --color-primary-100: oklch(0.928 0.038 258);
    --color-primary-200: oklch(0.868 0.072 258);
    --color-primary-300: oklch(0.782 0.112 258);
    --color-primary-400: oklch(0.672 0.148 258);
    --color-primary-500: oklch(0.568 0.178 258);   /* main brand */
    --color-primary-600: oklch(0.488 0.182 258);
    --color-primary-700: oklch(0.408 0.168 258);
    --color-primary-800: oklch(0.338 0.142 258);
    --color-primary-900: oklch(0.268 0.108 258);
    --color-primary-950: oklch(0.198 0.078 258);

    /* Success — emerald */
    --color-success-50:  oklch(0.968 0.018 152);
    --color-success-100: oklch(0.932 0.040 152);
    --color-success-200: oklch(0.868 0.076 152);
    --color-success-300: oklch(0.778 0.118 152);
    --color-success-400: oklch(0.668 0.148 152);
    --color-success-500: oklch(0.568 0.158 152);
    --color-success-600: oklch(0.488 0.142 152);
    --color-success-700: oklch(0.408 0.118 152);
    --color-success-800: oklch(0.338 0.092 152);
    --color-success-900: oklch(0.268 0.068 152);

    /* Warning — amber */
    --color-warning-50:  oklch(0.982 0.018 82);
    --color-warning-100: oklch(0.958 0.042 82);
    --color-warning-200: oklch(0.912 0.082 82);
    --color-warning-300: oklch(0.848 0.122 82);
    --color-warning-400: oklch(0.768 0.158 82);
    --color-warning-500: oklch(0.688 0.172 82);
    --color-warning-600: oklch(0.598 0.158 82);
    --color-warning-700: oklch(0.508 0.132 82);
    --color-warning-800: oklch(0.418 0.102 82);
    --color-warning-900: oklch(0.348 0.078 82);

    /* Danger — rose */
    --color-danger-50:  oklch(0.972 0.016 22);
    --color-danger-100: oklch(0.942 0.038 22);
    --color-danger-200: oklch(0.888 0.078 22);
    --color-danger-300: oklch(0.808 0.122 22);
    --color-danger-400: oklch(0.698 0.162 22);
    --color-danger-500: oklch(0.598 0.192 22);
    --color-danger-600: oklch(0.518 0.188 22);
    --color-danger-700: oklch(0.438 0.168 22);
    --color-danger-800: oklch(0.368 0.138 22);
    --color-danger-900: oklch(0.298 0.102 22);

    /* ─────────────────────────────────────────────
       SEMANTIC COLOR ALIASES — Light Mode
    ───────────────────────────────────────────── */

    /* Backgrounds */
    --color-bg:           var(--color-neutral-50);
    --color-bg-elevated:  var(--color-neutral-0);
    --color-bg-soft:      var(--color-neutral-100);
    --color-bg-subtle:    var(--color-neutral-150);
    --color-bg-hover:     var(--color-neutral-100);
    --color-bg-active:    var(--color-neutral-200);

    /* Borders */
    --color-border:        var(--color-neutral-200);
    --color-border-strong: var(--color-neutral-300);
    --color-border-focus:  var(--color-primary-500);
    --color-border-error:  var(--color-danger-500);

    /* Text */
    --color-text:          var(--color-neutral-900);
    --color-text-secondary: var(--color-neutral-600);
    --color-text-muted:    var(--color-neutral-500);
    --color-text-subtle:   var(--color-neutral-400);
    --color-text-inverse:  var(--color-neutral-0);
    --color-text-link:     var(--color-primary-600);
    --color-text-link-hover: var(--color-primary-700);

    /* Brand semantic */
    --color-primary:            var(--color-primary-500);
    --color-primary-hover:      var(--color-primary-600);
    --color-primary-active:     var(--color-primary-700);
    --color-primary-soft:       var(--color-primary-50);
    --color-primary-soft-hover: var(--color-primary-100);
    --color-primary-dark:       var(--color-primary-700);

    /* Status semantic */
    --color-success:            var(--color-success-500);
    --color-success-hover:      var(--color-success-600);
    --color-success-soft:       var(--color-success-50);
    --color-success-soft-hover: var(--color-success-100);

    --color-warning:            var(--color-warning-500);
    --color-warning-hover:      var(--color-warning-600);
    --color-warning-soft:       var(--color-warning-50);
    --color-warning-soft-hover: var(--color-warning-100);

    --color-danger:             var(--color-danger-500);
    --color-danger-hover:       var(--color-danger-600);
    --color-danger-soft:        var(--color-danger-50);
    --color-danger-soft-hover:  var(--color-danger-100);

    --color-info:      var(--color-primary-500);
    --color-info-soft: var(--color-primary-50);

    /* ─────────────────────────────────────────────
       SPACING SCALE (4px base)
    ───────────────────────────────────────────── */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  28px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Legacy aliases (used in style.css) */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-3);
    --space-lg: var(--space-4);
    --space-xl: var(--space-6);
    --space-2xl: var(--space-8);

    /* ─────────────────────────────────────────────
       BORDER RADIUS
    ───────────────────────────────────────────── */
    --radius-none: 0;
    --radius-xs:   3px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   10px;
    --radius-xl:   14px;
    --radius-2xl:  20px;
    --radius-full: 9999px;

    /* ─────────────────────────────────────────────
       SHADOWS — subtle, layered, cool-tinted
    ───────────────────────────────────────────── */
    --shadow-xs:  0 1px 2px oklch(0.18 0.01 250 / 0.06);
    --shadow-sm:  0 1px 3px oklch(0.18 0.01 250 / 0.08),
                  0 1px 2px oklch(0.18 0.01 250 / 0.04);
    --shadow-md:  0 2px 8px oklch(0.18 0.01 250 / 0.08),
                  0 1px 3px oklch(0.18 0.01 250 / 0.05);
    --shadow-lg:  0 4px 16px oklch(0.18 0.01 250 / 0.10),
                  0 2px 6px oklch(0.18 0.01 250 / 0.06);
    --shadow-xl:  0 8px 28px oklch(0.18 0.01 250 / 0.12),
                  0 4px 10px oklch(0.18 0.01 250 / 0.07);
    --shadow-2xl: 0 16px 48px oklch(0.18 0.01 250 / 0.14),
                  0 6px 16px oklch(0.18 0.01 250 / 0.08);

    /* Inset border shadow (replaces heavy borders) */
    --shadow-inset: inset 0 0 0 1px oklch(0.18 0.01 250 / 0.08);

    /* Focus rings */
    --focus-ring:       0 0 0 3px oklch(0.568 0.178 258 / 0.22);
    --focus-ring-error: 0 0 0 3px oklch(0.598 0.192 22 / 0.22);

    /* ─────────────────────────────────────────────
       TYPOGRAPHY
    ───────────────────────────────────────────── */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont,
                        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono',
                        Menlo, Consolas, monospace;

    --font-size-2xs:  10px;
    --font-size-xs:   11px;
    --font-size-sm:   12px;
    --font-size-base: 13px;
    --font-size-md:   14px;
    --font-size-lg:   15px;
    --font-size-xl:   17px;
    --font-size-2xl:  20px;
    --font-size-3xl:  24px;
    --font-size-4xl:  30px;
    --font-size-5xl:  38px;

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:   1.2;
    --line-height-snug:    1.35;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.625;

    /* Letter spacing */
    --tracking-tight:  -0.01em;
    --tracking-normal:  0;
    --tracking-wide:    0.02em;
    --tracking-wider:   0.04em;
    --tracking-widest:  0.08em;

    /* ─────────────────────────────────────────────
       TRANSITIONS
    ───────────────────────────────────────────── */
    --transition-fast:   100ms ease;
    --transition-base:   160ms ease;
    --transition-slow:   220ms ease;
    --transition-slower: 300ms ease;

    /* ─────────────────────────────────────────────
       Z-INDEX SCALE
    ───────────────────────────────────────────── */
    --z-dropdown:       100;
    --z-sticky:         200;
    --z-fixed:          300;
    --z-modal-backdrop: 400;
    --z-modal:          500;
    --z-popover:        600;
    --z-tooltip:        700;
    --z-toast:          800;

    /* ─────────────────────────────────────────────
       CONTAINER BREAKPOINTS
    ───────────────────────────────────────────── */
    --container-xs:  320px;
    --container-sm:  480px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1280px;
    --container-2xl: 1536px;

    /* ─────────────────────────────────────────────
       TOPBAR — dark slate (Linear-style)
    ───────────────────────────────────────────── */
    --topbar-bg:          oklch(0.148 0.012 250);
    --topbar-border:      oklch(0.238 0.016 250);
    --topbar-text:        oklch(0.928 0.008 250);
    --topbar-text-muted:  oklch(0.628 0.018 250);
    --topbar-nav-hover:   oklch(0.238 0.016 250);
    --topbar-nav-active:  oklch(0.298 0.018 250);

    /* Motion */
    --motion-reduce: 0.01ms;
  }

  /* ─────────────────────────────────────────────
     REDUCED MOTION
  ───────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --transition-fast:   var(--motion-reduce);
      --transition-base:   var(--motion-reduce);
      --transition-slow:   var(--motion-reduce);
      --transition-slower: var(--motion-reduce);
    }
  }
}