/* ==========================================================================
   DANITURK design tokens — ONE set of semantic tokens, TWO themes.
   Components must only use semantic tokens (never raw hex) so that switching
   theme changes colour only, never layout. See docs/adr/0007.
   ========================================================================== */

:root {
  /* ---- Theme-independent scale ---- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-base: .9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-hero: clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem;

  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-full: 999px;

  --container: 1240px;
  --header-h: 64px;
  --sidebar-w: 248px;
  --rail-w: 72px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms;

  --z-header: 50; --z-drawer: 80; --z-modal: 100; --z-toast: 120;

  /* ---- Brand constants (identical in both modes) ---- */
  --primary: #1f5bff;
  --primary-hover: #3a72ff;
  --primary-active: #1848d6;
  --on-primary: #ffffff;
  --cyan: #22d3ee;
  --violet: #8b5cf6;
  --teal: #14b8a6;
  --brand-gradient: linear-gradient(135deg, #1f5bff 0%, #22d3ee 100%);
  --brand-gradient-soft: linear-gradient(135deg, #1f5bff 0%, #6d5bff 60%, #8b5cf6 100%);
}

/* ==========================================================================
   DARK
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #050a14;
  --bg-elevated: #08101f;
  --bg-atmosphere:
    radial-gradient(1100px 560px at 12% -8%, rgba(31,91,255,.20), transparent 62%),
    radial-gradient(900px 480px at 100% 0%, rgba(34,211,238,.09), transparent 58%),
    radial-gradient(800px 500px at 50% 110%, rgba(139,92,246,.08), transparent 60%);

  --surface: #0b1322;
  --surface-2: #0f1a2e;
  --surface-3: #15233f;
  --surface-hover: #12203a;
  --surface-inverse: #f3f7ff;

  --border: rgba(96,140,255,.18);
  --border-strong: rgba(96,140,255,.36);
  --divider: rgba(148,175,235,.12);

  --text: #f3f7ff;
  --text-muted: #9fb0cd;
  --text-subtle: #8496b6;
  --text-inverse: #0b1a3a;
  --link: #6b9bff;

  --primary-soft: rgba(31,91,255,.18);
  --primary-soft-border: rgba(58,114,255,.45);

  --success: #3ddc97;
  --success-bg: rgba(61,220,151,.13);
  --warning: #fbbf24;
  --warning-bg: rgba(251,191,36,.13);
  --danger: #ff7a85;
  --danger-bg: rgba(255,122,133,.13);
  --danger-solid: #e5384b;
  --info: #6fb6ff;
  --info-bg: rgba(111,182,255,.13);
  --star: #fbbf24;
  --star-empty: rgba(148,175,235,.28);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,.6), 0 0 0 1px var(--border);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.75), 0 0 0 1px var(--border);
  --glow: 0 0 0 1px var(--border-strong), 0 14px 44px -14px rgba(31,91,255,.55);
  --ring: 0 0 0 3px rgba(58,114,255,.6);

  --header-bg: rgba(5,10,20,.92);
  --overlay: rgba(2,5,12,.72);
  --skeleton-a: #101c33; --skeleton-b: #182a4b;
  --img-scrim: linear-gradient(180deg, transparent, rgba(5,10,20,.55));

  --chart-line: #3a72ff;
  --chart-area: rgba(58,114,255,.22);
  --chart-bar: #2f6bff;
  --chart-grid: rgba(148,175,235,.14);
  --chart-axis: #8496b6;
  --chart-tooltip-bg: #0f1a2e;

  --hero-scrim: linear-gradient(90deg, rgba(5,10,20,.74) 0%, rgba(5,10,20,.4) 40%, rgba(5,10,20,0) 68%);
  --hero-scrim-v: linear-gradient(180deg, rgba(5,10,20,.55), rgba(5,10,20,0) 70%);
}

/* ==========================================================================
   LIGHT
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f8ff;
  --bg-elevated: #ffffff;
  --bg-atmosphere:
    linear-gradient(180deg, #ffffff 0%, #eef4ff 46%, #f4f8ff 100%),
    radial-gradient(900px 480px at 8% -6%, rgba(31,91,255,.10), transparent 60%);

  --surface: #ffffff;
  --surface-2: #f3f7fe;
  --surface-3: #e8effb;
  --surface-hover: #f0f5ff;
  --surface-inverse: #0b1a3a;

  --border: #dce5f4;
  --border-strong: #b9c9e6;
  --divider: #e6edf8;

  --text: #0b1a3a;
  --text-muted: #4f607e;
  --text-subtle: #5f6f8b;
  --text-inverse: #f3f7ff;
  --link: #1848d6;

  --primary-soft: #e6eeff;
  --primary-soft-border: #b7ccff;

  --success: #087a52;
  --success-bg: #e1f7ee;
  --warning: #9a5b00;
  --warning-bg: #fff1d6;
  --danger: #c4283b;
  --danger-bg: #fde8eb;
  --danger-solid: #d6303f;
  --info: #0b62b8;
  --info-bg: #e3f1ff;
  --star: #f5a300;
  --star-empty: #d5dff2;

  --shadow-sm: 0 1px 2px rgba(15,35,80,.06);
  --shadow-md: 0 8px 24px -10px rgba(20,50,120,.18), 0 0 0 1px var(--border);
  --shadow-lg: 0 24px 60px -24px rgba(20,50,120,.28), 0 0 0 1px var(--border);
  --glow: 0 0 0 1px var(--primary-soft-border), 0 12px 34px -14px rgba(31,91,255,.35);
  --ring: 0 0 0 3px rgba(31,91,255,.4);

  --header-bg: rgba(255,255,255,.94);
  --overlay: rgba(11,26,58,.5);
  --skeleton-a: #e9eff9; --skeleton-b: #f6f9ff;
  --img-scrim: linear-gradient(180deg, transparent, rgba(11,26,58,.18));

  --chart-line: #1f5bff;
  --chart-area: rgba(31,91,255,.14);
  --chart-bar: #2f6bff;
  --chart-grid: #e3eaf6;
  --chart-axis: #5f6f8b;
  --chart-tooltip-bg: #0b1a3a;

  --hero-scrim: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.72) 40%, rgba(255,255,255,0) 68%);
  --hero-scrim-v: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0) 70%);
}

/* If JS is blocked the head script cannot set data-theme: honour the OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:#050a14;--bg-elevated:#08101f;--surface:#0b1322;--surface-2:#0f1a2e;--surface-3:#15233f;--surface-hover:#12203a;
    --border:rgba(96,140,255,.18);--border-strong:rgba(96,140,255,.36);--divider:rgba(148,175,235,.12);
    --text:#f3f7ff;--text-muted:#9fb0cd;--text-subtle:#8496b6;--link:#6b9bff;--primary-soft:rgba(31,91,255,.18);
    --primary-soft-border:rgba(58,114,255,.45);--success:#3ddc97;--success-bg:rgba(61,220,151,.13);--warning:#fbbf24;
    --warning-bg:rgba(251,191,36,.13);--danger:#ff7a85;--danger-bg:rgba(255,122,133,.13);--danger-solid:#e5384b;--info:#6fb6ff;--info-bg:rgba(111,182,255,.13);
    --star:#fbbf24;--star-empty:rgba(148,175,235,.28);--shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 8px 24px -8px rgba(0,0,0,.6),0 0 0 1px var(--border);--shadow-lg:0 24px 60px -20px rgba(0,0,0,.75),0 0 0 1px var(--border);
    --glow:0 0 0 1px var(--border-strong),0 14px 44px -14px rgba(31,91,255,.55);--ring:0 0 0 3px rgba(58,114,255,.6);
    --header-bg:rgba(5,10,20,.92);--overlay:rgba(2,5,12,.72);--skeleton-a:#101c33;--skeleton-b:#182a4b;
    --bg-atmosphere:radial-gradient(1100px 560px at 12% -8%,rgba(31,91,255,.2),transparent 62%);
    --chart-line:#3a72ff;--chart-area:rgba(58,114,255,.22);--chart-bar:#2f6bff;--chart-grid:rgba(148,175,235,.14);--chart-axis:#8496b6;--chart-tooltip-bg:#0f1a2e;
  }
  :root:not([data-theme]) { --img-scrim: linear-gradient(180deg, transparent, rgba(5,10,20,.55)); --hero-scrim: linear-gradient(90deg, rgba(5,10,20,.74) 0%, rgba(5,10,20,.4) 40%, rgba(5,10,20,0) 68%); --hero-scrim-v: linear-gradient(180deg, rgba(5,10,20,.55), rgba(5,10,20,0) 70%); }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg:#f4f8ff;--bg-elevated:#fff;--surface:#fff;--surface-2:#f3f7fe;--surface-3:#e8effb;--surface-hover:#f0f5ff;
    --border:#dce5f4;--border-strong:#b9c9e6;--divider:#e6edf8;--text:#0b1a3a;--text-muted:#4f607e;--text-subtle:#5f6f8b;--link:#1848d6;
    --primary-soft:#e6eeff;--primary-soft-border:#b7ccff;--success:#087a52;--success-bg:#e1f7ee;--warning:#9a5b00;--warning-bg:#fff1d6;
    --danger:#c4283b;--danger-bg:#fde8eb;--danger-solid:#d6303f;--info:#0b62b8;--info-bg:#e3f1ff;--star:#f5a300;--star-empty:#d5dff2;
    --shadow-sm:0 1px 2px rgba(15,35,80,.06);--shadow-md:0 8px 24px -10px rgba(20,50,120,.18),0 0 0 1px var(--border);
    --shadow-lg:0 24px 60px -24px rgba(20,50,120,.28),0 0 0 1px var(--border);--glow:0 0 0 1px var(--primary-soft-border),0 12px 34px -14px rgba(31,91,255,.35);
    --ring:0 0 0 3px rgba(31,91,255,.4);--header-bg:rgba(255,255,255,.94);--overlay:rgba(11,26,58,.5);--skeleton-a:#e9eff9;--skeleton-b:#f6f9ff;
    --bg-atmosphere:linear-gradient(180deg,#fff 0%,#eef4ff 46%,#f4f8ff 100%);
    --chart-line:#1f5bff;--chart-area:rgba(31,91,255,.14);--chart-bar:#2f6bff;--chart-grid:#e3eaf6;--chart-axis:#5f6f8b;--chart-tooltip-bg:#0b1a3a;
  }
  :root:not([data-theme]) { --img-scrim: linear-gradient(180deg, transparent, rgba(11,26,58,.18)); --hero-scrim: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.72) 40%, rgba(255,255,255,0) 68%); --hero-scrim-v: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0) 70%); }
}