/* tokens.css — Develop design tokens (v2).
 *
 * v2 is a NEW, additive version. /v1 is frozen and untouched; channels migrate
 * to /v2 opt-in. Three explicit tiers (the lint-enforced rule):
 *   COMPONENT (--c-*)  -> reference only SEMANTIC
 *   SEMANTIC  (role)   -> reference only PRIMITIVE
 *   PRIMITIVE (--p-*)  -> raw values (INTERNAL; consumers MUST NOT reference)
 *
 * Palette: neutral black/gray; the blue->purple --brand-gradient is the one
 * accent (primary buttons + titles). Compact 12px body. Dark mode for BOTH live
 * selector conventions (.dark AND [data-theme="dark"]); consumers must not add a
 * third. High-contrast: [data-contrast="high"]. Per-product accent: [data-brand].
 */

:root {
  /* Tell the UA to render native controls (scrollbars, select popups, date
     pickers, autofill) for the active theme — fixes the "light widgets on a
     dark page" tell. */
  color-scheme: light dark;

  /* ============================================================
     TIER 1 — PRIMITIVE  (--p-*, internal; never referenced by consumers)
     ============================================================ */

  /* Neutral ramp — fixed role per step (Radix-style), authored per theme
     (light here, dark below), NOT lightness-flipped. Holds the current v1
     values so the look is unchanged.
       1 app bg · 2 subtle bg · 3 component bg · 4 hover · 5 active/line ·
       6 border · 7 border-strong · 8 disabled-fg/placeholder · 9 muted text ·
       10 secondary text · 11 strong text · 12 max-contrast text */
  --p-gray-0: oklch(1 0 0);        /* raised surface (cards float above bg) */
  --p-gray-1: oklch(0.985 0 0);
  --p-gray-2: oklch(0.972 0 0);
  --p-gray-3: oklch(0.965 0 0);
  --p-gray-4: oklch(0.94 0 0);
  --p-gray-5: oklch(0.922 0 0);
  --p-gray-6: oklch(0.9 0 0);
  --p-gray-7: oklch(0.83 0 0);
  --p-gray-8: oklch(0.7 0 0);
  --p-gray-9: oklch(0.52 0 0);   /* muted text — darkened so it clears WCAG AA 4.5:1 */
  --p-gray-10: oklch(0.45 0 0);
  --p-gray-11: oklch(0.38 0 0);
  --p-gray-12: oklch(0.12 0 0);

  /* Status hues — oklch (perceptually even color-mix tints). */
  --p-green: oklch(0.63 0.17 149);
  --p-amber: oklch(0.75 0.15 75);
  --p-red:   oklch(0.58 0.21 27);
  --p-blue:  oklch(0.55 0.2 256);

  /* Brand gradient stops — the gradient is DERIVED from these once. */
  --p-brand-1: oklch(0.54 0.23 266);
  --p-brand-2: oklch(0.52 0.26 296);
  --p-brand-3: oklch(0.55 0.27 324);

  /* ============================================================
     TIER 2 — SEMANTIC  (role tokens; the consumer/contract surface)
     ============================================================ */

  /* Surface ladder (bg -> raised card -> overlay/popover -> sunken well). */
  --background:       var(--p-gray-1);
  --surface:          var(--p-gray-1);
  --surface-raised:   var(--p-gray-0);
  --surface-overlay:  var(--p-gray-0);
  --surface-sunken:   var(--p-gray-3);
  --card:             var(--p-gray-0);
  --popover:          var(--p-gray-0);
  --secondary:        var(--p-gray-3);
  --muted:            var(--p-gray-4);
  --accent:           var(--p-gray-3);

  /* Text. */
  --foreground:           var(--p-gray-12);
  --card-foreground:      var(--p-gray-12);
  --popover-foreground:   var(--p-gray-12);
  --secondary-foreground: var(--p-gray-11);
  --accent-foreground:    var(--p-gray-12);
  --muted-foreground:     var(--p-gray-9);
  --foreground-subtle:    var(--p-gray-10);
  --placeholder:          var(--p-gray-8);

  /* Lines. */
  --border:        var(--p-gray-5);
  --border-strong: var(--p-gray-7);
  --border-hover:  var(--p-gray-7);
  --input:         var(--border);
  --ring:          var(--p-gray-10);
  --border-focus:  var(--ring);

  /* Primary = neutral near-black; brand gradient layered on top for accent. */
  --primary:            var(--p-gray-12);
  --primary-foreground: var(--p-gray-1);

  /* Intent recipes — five names each, tints derived via color-mix so a filled
     chip always has a guaranteed-contrast on-color. */
  --success: var(--p-green);
  --success-foreground: var(--p-gray-1);
  --success-bg: color-mix(in oklab, var(--p-green) 12%, var(--surface));
  --success-border: color-mix(in oklab, var(--p-green) 35%, transparent);

  --warning: var(--p-amber);
  --warning-foreground: var(--p-gray-12);
  --warning-bg: color-mix(in oklab, var(--p-amber) 14%, var(--surface));
  --warning-border: color-mix(in oklab, var(--p-amber) 38%, transparent);

  --danger: var(--p-red);
  --danger-foreground: var(--p-gray-1);
  --danger-bg: color-mix(in oklab, var(--p-red) 12%, var(--surface));
  --danger-border: color-mix(in oklab, var(--p-red) 35%, transparent);
  --destructive: var(--p-red);            /* v1-compat alias */

  --info: var(--p-blue);
  --info-foreground: var(--p-gray-1);
  --info-bg: color-mix(in oklab, var(--p-blue) 12%, var(--surface));
  --info-border: color-mix(in oklab, var(--p-blue) 35%, transparent);

  /* State layers — overlays composited on a surface for hover/press/select. */
  --state-hover:    color-mix(in oklab, var(--foreground) 5%, transparent);
  --state-pressed:  color-mix(in oklab, var(--foreground) 9%, transparent);
  --state-selected: color-mix(in oklab, var(--foreground) 7%, transparent);
  --state-disabled-opacity: 0.5;
  --surface-hover:  var(--accent);

  /* Brand gradient. */
  --brand-gradient: linear-gradient(95deg,
    var(--p-brand-1) 0%, var(--p-brand-2) 50%, var(--p-brand-3) 100%);
  --brand-gradient-fg: oklch(0.99 0 0);

  /* Tonal buttons — neutral controls (default / secondary / icon / ghost) carry
     a soft blue→purple wash so every button reads as part of the brand family,
     not flat gray. Derived from the brand mid-stop (--p-brand-2). Consumed by
     .btn / .btn-secondary / .btn-ghost and <dev-button>. */
  --btn-tonal-bg:           color-mix(in oklab, var(--p-brand-2)  9%, var(--p-gray-1));
  --btn-tonal-bg-hover:     color-mix(in oklab, var(--p-brand-2) 16%, var(--p-gray-1));
  --btn-tonal-selected-bg:  color-mix(in oklab, var(--p-brand-2) 20%, var(--p-gray-1));
  --btn-tonal-fg:           color-mix(in oklab, var(--p-brand-2) 60%, var(--p-gray-12));
  --btn-tonal-border:       color-mix(in oklab, var(--p-brand-2) 28%, var(--border));
  --btn-tonal-border-hover: color-mix(in oklab, var(--p-brand-2) 48%, var(--border));

  /* v1-contract carry-over (data-viz + sidebar) — consumers' Tailwind bridges
     reference these; kept byte-identical to v1 so /v2 is a drop-in. */
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: var(--p-gray-2);
  --sidebar-foreground: var(--p-gray-11);
  --sidebar-primary: var(--p-gray-12);
  --sidebar-primary-foreground: var(--p-gray-1);
  --sidebar-accent: color-mix(in oklab, var(--p-gray-12) 6%, transparent);
  --sidebar-accent-foreground: var(--p-gray-12);
  --sidebar-border: var(--p-gray-5);
  --sidebar-ring: var(--ring);

  /* Fonts + type scale (raw ladder kept for direct use). */
  --font-sans: var(--font-geist, ui-sans-serif), ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei",
    "Hiragino Sans GB", sans-serif;
  --font-mono: var(--font-geist-mono, ui-monospace), ui-monospace,
    SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem;

  /* Type ROLES — compact 12px base. Reference roles, not raw steps. */
  --text-micro:   0.6875rem;  /* 11px */
  --text-caption: 0.75rem;    /* 12px */
  --text-body:    0.75rem;    /* 12px — canonical base */
  --text-title:   0.875rem;   /* 14px */
  --text-heading: 1rem;       /* 16px */
  --text-subheading: 1.125rem; /* 18px — h2 / sub-section */
  --text-display: 1.375rem;   /* 22px */
  /* Marketing poster scale — fluid hero/section type for landing pages, beyond
     --text-display (UI cap). Use via .text-poster-{sm,md,lg}. */
  --text-poster-sm: clamp(1.75rem, 1.2rem + 2.6vw, 2.5rem);   /* ~28→40px */
  --text-poster-md: clamp(2.25rem, 1.3rem + 4.5vw, 4rem);     /* ~36→64px */
  --text-poster-lg: clamp(2.75rem, 1.4rem + 6.5vw, 5.5rem);   /* ~44→88px */

  --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em;
  --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6;
  --leading-heading: var(--leading-tight); --leading-body: 1.5;

  /* Spacing (4px unit). */
  --sp-px: 1px; --sp-0_5: 2px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-10: 40px; --sp-11: 44px; --sp-12: 48px;

  /* Radius — derived off the base so retheming reshapes everything. */
  --radius: 0.5rem;                          /* 8px — tool-grade controls */
  --radius-sm: calc(var(--radius) - 2px);    /* 6px */
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 2px);    /* 10px */
  --radius-xl: calc(var(--radius) + 4px);    /* 12px */
  --radius-full: 9999px;

  /* Elevation ladder (each gets a dark counterpart below). */
  --elevation-0: none;
  --elevation-1: 0 1px 2px oklch(0 0 0 / 0.05), 0 1px 1px oklch(0 0 0 / 0.03);
  --elevation-2: 0 4px 12px oklch(0 0 0 / 0.06), 0 1px 4px oklch(0 0 0 / 0.04);
  --elevation-3: 0 12px 24px oklch(0 0 0 / 0.08), 0 4px 8px oklch(0 0 0 / 0.05);
  --elevation-4: 0 20px 48px oklch(0 0 0 / 0.1), 0 8px 16px oklch(0 0 0 / 0.06);
  --shadow-card: var(--elevation-1);     /* v1-compat names */
  --shadow-float: var(--elevation-3);
  --shadow-inset: inset 0 1px 1px oklch(0 0 0 / 0.04);

  /* Motion. */
  --duration-fast: 120ms; --duration-normal: 180ms; --duration-slow: 280ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index ladder (gaps of 10). */
  --z-base: 0; --z-dropdown: 1000; --z-sticky: 1010; --z-overlay: 1020;
  --z-modal: 1030; --z-popover: 1040; --z-toast: 1050; --z-tooltip: 1060;

  /* Icon sizes (aligned to type). */
  --icon-sm: 14px; --icon-md: 16px; --icon-lg: 20px; --icon-xl: 24px;

  /* Breakpoint reference constants. NOTE: custom properties CANNOT drive
     @media/@container conditions — these document the vocabulary; the literals
     30rem/48rem/64rem are used in @container rules. */
  --bp-sm: 30rem; --bp-md: 48rem; --bp-lg: 64rem;

  /* Focus ring recipe (ONE look, used by every control via :focus-visible). */
  --focus-ring: 0 0 0 2px var(--background), 0 0 0 4px color-mix(in oklab, var(--ring) 55%, transparent);
  --focus-ring-danger: 0 0 0 2px var(--background), 0 0 0 4px color-mix(in oklab, var(--danger) 50%, transparent);

  /* ============================================================
     TIER 3 — COMPONENT  (--c-*, override hooks; default to semantics)
     ============================================================ */
  --control-h: 2rem;                 /* compact control height (32px) */
  --control-h-sm: 1.75rem;           /* 28px */
  --control-h-lg: 2.5rem;            /* 40px */
  --c-btn-h: var(--control-h);
  --c-btn-px: 0.875rem;              /* 14px — optical breathing room */
  --c-btn-radius: var(--radius);
  --c-input-h: var(--control-h);
  --c-input-bg: var(--surface-raised);
  --c-input-border: var(--border);
  --c-card-radius: var(--radius-lg);
  --c-card-pad: var(--sp-4);
  --c-card-shadow: var(--shadow-card);
  --c-tag-radius: var(--radius-full);
}

/* ---- Dark theme (both selector conventions) ---- */
.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --p-gray-0: oklch(0.225 0 0);     /* raised card (above bg) */
  --p-gray-1: oklch(0.195 0 0);     /* app bg */
  --p-gray-2: oklch(0.21 0 0);
  --p-gray-3: oklch(0.26 0 0);
  --p-gray-4: oklch(0.165 0 0);     /* muted (recessed) */
  --p-gray-5: oklch(0.3 0 0);
  --p-gray-6: oklch(0.27 0 0);
  --p-gray-7: oklch(0.38 0 0);
  --p-gray-8: oklch(0.45 0 0);
  --p-gray-9: oklch(0.6 0 0);
  --p-gray-10: oklch(0.7 0 0);
  --p-gray-11: oklch(0.75 0 0);
  --p-gray-12: oklch(0.94 0 0);

  --p-green: oklch(0.7 0.16 150);
  --p-amber: oklch(0.8 0.14 78);
  --p-red:   oklch(0.7 0.18 25);
  --p-blue:  oklch(0.68 0.16 254);

  --p-brand-1: oklch(0.64 0.21 266);
  --p-brand-2: oklch(0.62 0.25 296);
  --p-brand-3: oklch(0.65 0.26 324);

  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);

  --primary-foreground: var(--p-gray-1);
  --border: var(--p-gray-6);   /* keep dark border at 0.27 (light uses gray-5) */

  /* Tonal buttons — louder mix on dark so the wash survives the dark surface. */
  --btn-tonal-bg:           color-mix(in oklab, var(--p-brand-2) 22%, var(--p-gray-3));
  --btn-tonal-bg-hover:     color-mix(in oklab, var(--p-brand-2) 32%, var(--p-gray-3));
  --btn-tonal-selected-bg:  color-mix(in oklab, var(--p-brand-2) 42%, var(--p-gray-3));
  --btn-tonal-fg:           color-mix(in oklab, var(--p-brand-2) 32%, var(--p-gray-12));
  --btn-tonal-border:       color-mix(in oklab, var(--p-brand-2) 40%, var(--border));
  --btn-tonal-border-hover: color-mix(in oklab, var(--p-brand-2) 55%, var(--border));
  --success-foreground: oklch(0.16 0 0);
  --danger-foreground: oklch(0.16 0 0);
  --info-foreground: oklch(0.16 0 0);

  --elevation-1: inset 0 1px 0 oklch(1 0 0 / 0.04), 0 1px 2px oklch(0 0 0 / 0.25);
  --elevation-2: 0 4px 12px oklch(0 0 0 / 0.4), 0 1px 4px oklch(0 0 0 / 0.25);
  --elevation-3: 0 12px 28px oklch(0 0 0 / 0.45), 0 4px 10px oklch(0 0 0 / 0.3);
  --elevation-4: 0 20px 48px oklch(0 0 0 / 0.55), 0 8px 16px oklch(0 0 0 / 0.35);
  --shadow-inset: inset 0 1px 1px oklch(0 0 0 / 0.2);
}

/* ---- High-contrast — manual [data-contrast=high] OR OS prefers-contrast.
   Its own mapping (heavier lines + AAA text), not a filter. ---- */
[data-contrast="high"] {
  --border: var(--p-gray-12);
  --border-strong: var(--p-gray-12);
  --muted-foreground: var(--p-gray-12);
  --foreground-subtle: var(--p-gray-12);
  --placeholder: var(--p-gray-11);
  --ring: var(--p-gray-12);
}
@media (prefers-contrast: more) {
  :root {
    --border: var(--p-gray-12);
    --border-strong: var(--p-gray-12);
    --muted-foreground: var(--p-gray-12);
    --foreground-subtle: var(--p-gray-12);
    --placeholder: var(--p-gray-11);
    --ring: var(--p-gray-12);
  }
}

/* ============================================================
   FALLBACKS — a NO-BUILD system has no compiler to down-level color, so it must
   render on engines without oklch()/color-mix() (older Safari, in-app WebViews).
   Default values above stay oklch/color-mix (modern path, untouched); these
   blocks only fire where the feature is ABSENT.
   ============================================================ */
@supports not (color: oklch(0 0 0)) {
  :root {
    --p-gray-0: #ffffff; --p-gray-1: #fafafa; --p-gray-2: #f7f7f8;
    --p-gray-3: #f4f4f5; --p-gray-4: #ededf0; --p-gray-5: #e4e4e7;
    --p-gray-6: #dcdce0; --p-gray-7: #c4c4c9; --p-gray-8: #a1a1aa;
    --p-gray-9: #5c5c63; --p-gray-10: #52525b; --p-gray-11: #3f3f46;
    --p-gray-12: #0f0f11;
    --p-green: #16a34a; --p-amber: #d97706; --p-red: #dc2626; --p-blue: #2563eb;
    --p-brand-1: #4f46e5; --p-brand-2: #7c3aed; --p-brand-3: #a21caf;
    --brand-gradient-fg: #ffffff;
    --chart-1: #e0652e; --chart-2: #3a9d94; --chart-3: #3f5b78; --chart-4: #d6c84e; --chart-5: #e2a93f;
  }
  .dark, [data-theme="dark"] {
    --p-gray-0: #232326; --p-gray-1: #18181b; --p-gray-2: #1d1d20;
    --p-gray-3: #27272a; --p-gray-4: #141417; --p-gray-5: #34343a;
    --p-gray-6: #2e2e33; --p-gray-7: #3f3f46; --p-gray-8: #52525b;
    --p-gray-9: #8a8a93; --p-gray-10: #a1a1aa; --p-gray-11: #b4b4bb;
    --p-gray-12: #f4f4f5;
    --p-green: #22c55e; --p-amber: #fbbf24; --p-red: #f87171; --p-blue: #60a5fa;
    --p-brand-1: #6366f1; --p-brand-2: #8b5cf6; --p-brand-3: #c026d3;
  }
}
@supports not (color: color-mix(in oklab, red, blue)) {
  :root {
    --success-bg: #e9f6ee; --success-border: #a7dcbd;
    --warning-bg: #fbf0df; --warning-border: #f0cd96;
    --danger-bg:  #fbe9e9; --danger-border:  #f0b0b0;
    --info-bg:    #e7effc; --info-border:    #aac6f4;
    --state-hover: rgba(24,24,27,0.05); --state-pressed: rgba(24,24,27,0.09);
    --state-selected: rgba(24,24,27,0.07);
    --btn-tonal-bg: #f1ecfb; --btn-tonal-bg-hover: #e6def7; --btn-tonal-selected-bg: #ddd2f3;
    --btn-tonal-fg: #45307f; --btn-tonal-border: #cbbfe3; --btn-tonal-border-hover: #a892d6;
    --focus-ring: 0 0 0 2px var(--background), 0 0 0 4px rgba(82,82,91,0.55);
    --focus-ring-danger: 0 0 0 2px var(--background), 0 0 0 4px rgba(220,38,38,0.5);
  }
  .dark, [data-theme="dark"] {
    --success-bg: #14241a; --success-border: #2c5840;
    --warning-bg: #2a2113; --warning-border: #5a4a28;
    --danger-bg:  #2a1717; --danger-border:  #5a3434;
    --info-bg:    #16213a; --info-border:    #2c4470;
    --state-hover: rgba(255,255,255,0.06); --state-pressed: rgba(255,255,255,0.1);
    --state-selected: rgba(255,255,255,0.08);
    --btn-tonal-bg: #3a3252; --btn-tonal-bg-hover: #463769; --btn-tonal-selected-bg: #51407e;
    --btn-tonal-fg: #cdc0f2; --btn-tonal-border: #534486; --btn-tonal-border-hover: #6a55a3;
    --focus-ring: 0 0 0 2px var(--background), 0 0 0 4px rgba(161,161,170,0.5);
    --focus-ring-danger: 0 0 0 2px var(--background), 0 0 0 4px rgba(248,113,113,0.5);
  }
}