/* ═══════════════════════════════════════════════════════════════════════════
   Addy Bite — Design Tokens
   ───────────────────────────────────────────────────────────────────────────
   A dark-first, hairline-and-surface-ladder system in the Linear idiom:
   depth comes from stacked surfaces and 1px borders, not drop shadows, and a
   single chromatic accent carries the brand. Light mode is a full peer, not
   an inversion.

   Three layers, in order:
     primitive  → raw scales (never used directly in components)
     semantic   → roles (--canvas, --ink, --accent) that components consume
     component  → per-component values, defined next to the component

   Themes:
     :root                        light
     [data-theme="dark"]          dark, explicitly chosen
     (prefers-color-scheme: dark) dark, when the user hasn't chosen
     [data-accent="…"]            one of six accent identities
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Primitive: neutral ramp ─────────────────────────────────────────── */
  --n-0: #ffffff;
  --n-25: #fcfcfd;
  --n-50: #f7f8f9;
  --n-100: #eef0f2;
  --n-150: #e4e7ea;
  --n-200: #d8dbe0;
  --n-300: #b9bec6;
  --n-400: #939aa4;
  --n-500: #6f7680;
  --n-600: #545a63;
  --n-700: #3b4048;
  --n-750: #2a2e34;
  --n-800: #1e2125;
  --n-850: #17191c;
  --n-900: #121417;
  --n-950: #0c0e10;
  --n-1000: #08090a;

  /* ── Primitive: semantic hues ────────────────────────────────────────── */
  --green-400: #34d399;
  --green-500: #10b981;
  --green-600: #059669;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;

  /* ═══ Spacing — 4px base ═══ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ═══ Radius ═══ */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 18px;
  --r-pill: 9999px;

  /* ═══ Type ═══ */
  --font-sans:
    'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI',
    Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Size · line-height · tracking. Tracking pulls negative as size grows. */
  --t-display: 40px;
  --t-display-lh: 1.1;
  --t-display-ls: -1.2px;
  --t-h1: 28px;
  --t-h1-lh: 1.2;
  --t-h1-ls: -0.7px;
  --t-h2: 22px;
  --t-h2-lh: 1.25;
  --t-h2-ls: -0.45px;
  --t-h3: 17px;
  --t-h3-lh: 1.35;
  --t-h3-ls: -0.25px;
  --t-body: 14px;
  --t-body-lh: 1.55;
  --t-body-ls: -0.05px;
  --t-sm: 13px;
  --t-sm-lh: 1.5;
  --t-xs: 12px;
  --t-xs-lh: 1.45;
  --t-2xs: 11px;
  --t-2xs-lh: 1.4;
  /* Eyebrows take positive tracking — the contrast marks them as taxonomy. */
  --t-eyebrow: 11px;
  --t-eyebrow-ls: 0.5px;

  /* ═══ Motion ═══ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-1: 110ms; /* state flips: hover, checkbox */
  --dur-2: 180ms; /* small reveals */
  --dur-3: 260ms; /* panels, sheets */
  --dur-4: 420ms; /* full-screen transitions */

  /* ═══ Elevation — depth is surface + hairline; shadow is a last resort ═══ */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 16px 40px -8px rgb(0 0 0 / 0.18), 0 4px 12px -4px rgb(0 0 0 / 0.1);
  --shadow-pop: 0 24px 60px -12px rgb(0 0 0 / 0.28);

  /* ═══ Layout ═══ */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 56px;
  --bottomnav-h: 60px;
  --content-max: 1160px;

  /* ═══ Z-index ladder ═══ */
  --z-base: 0;
  --z-sticky: 100;
  --z-nav: 190;
  --z-overlay: 199;
  --z-drawer: 200;
  --z-sheet: 210;
  --z-modal: 240;
  --z-toast: 280;
  --z-top: 300;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEMANTIC — light
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* Surface ladder: canvas sits lowest, each step lifts. */
  --canvas: #f4f5f7;
  --surface-1: var(--n-0);
  --surface-2: var(--n-25);
  --surface-3: var(--n-100);
  --surface-4: var(--n-150);
  --surface-sunken: var(--n-100);

  /* Hairlines carry the depth. */
  --line: #e3e5ea;
  --line-strong: #d2d6dd;
  --line-subtle: #ecedf1;

  /* Ink ramp */
  --ink: #0d0f12;
  --ink-muted: #464c55;
  --ink-subtle: #6b7280;
  --ink-faint: #9aa1ab;
  --ink-on-accent: #ffffff;

  /* Semantic */
  --success: var(--green-600);
  --success-bg: #e9f9f1;
  --success-ink: #05683f;
  --warning: var(--amber-600);
  --warning-bg: #fdf4e3;
  --warning-ink: #7a4a05;
  --danger: var(--red-600);
  --danger-bg: #fdeced;
  --danger-ink: #96151b;
  --info-bg: color-mix(in srgb, var(--accent) 10%, transparent);

  /* Accent tints, derived so every accent theme gets them for free. */
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
  --accent-softer: color-mix(in srgb, var(--accent) 6%, var(--surface-1));
  --accent-line: color-mix(in srgb, var(--accent) 26%, transparent);
  --ring: color-mix(in srgb, var(--accent) 45%, transparent);

  /* The dark sidebar rail is a constant across both themes — it anchors the
     app the way a native title bar does. */
  --rail: #101215;
  --rail-ink: #e7e9ec;
  --rail-ink-subtle: #878e99;
  --rail-line: #23262b;
  --rail-hover: #191c20;

  --scrim: rgb(12 14 17 / 0.5);
  --skeleton: var(--n-100);
  --skeleton-shine: var(--n-150);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEMANTIC — dark
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --canvas: var(--n-1000);
    --surface-1: var(--n-950);
    --surface-2: var(--n-900);
    --surface-3: var(--n-850);
    --surface-4: var(--n-800);
    --surface-sunken: #060708;

    --line: #202429;
    --line-strong: #2c3137;
    --line-subtle: #171a1d;

    --ink: #f2f4f6;
    --ink-muted: #b4bac2;
    --ink-subtle: #878e99;
    --ink-faint: #61666e;
    --ink-on-accent: #ffffff;

    --success: var(--green-400);
    --success-bg: #0e2a20;
    --success-ink: #6ee7b7;
    --warning: var(--amber-400);
    --warning-bg: #2c2109;
    --warning-ink: #fcd34d;
    --danger: var(--red-400);
    --danger-bg: #2e1416;
    --danger-ink: #fca5a5;

    --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface-1));
    --accent-softer: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
    --accent-line: color-mix(in srgb, var(--accent) 34%, transparent);

    --rail: #0b0d0f;
    --rail-ink: #e7e9ec;
    --rail-ink-subtle: #7d838d;
    --rail-line: #1c1f23;
    --rail-hover: #15181b;

    --scrim: rgb(0 0 0 / 0.66);
    --skeleton: #16191c;
    --skeleton-shine: #1f2327;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 16px 40px -8px rgb(0 0 0 / 0.6);
    --shadow-pop: 0 24px 60px -12px rgb(0 0 0 / 0.7);
  }
}

/* Explicit dark choice wins over the OS setting. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --canvas: var(--n-1000);
  --surface-1: var(--n-950);
  --surface-2: var(--n-900);
  --surface-3: var(--n-850);
  --surface-4: var(--n-800);
  --surface-sunken: #060708;

  --line: #202429;
  --line-strong: #2c3137;
  --line-subtle: #171a1d;

  --ink: #f2f4f6;
  --ink-muted: #b4bac2;
  --ink-subtle: #878e99;
  --ink-faint: #61666e;
  --ink-on-accent: #ffffff;

  --success: var(--green-400);
  --success-bg: #0e2a20;
  --success-ink: #6ee7b7;
  --warning: var(--amber-400);
  --warning-bg: #2c2109;
  --warning-ink: #fcd34d;
  --danger: var(--red-400);
  --danger-bg: #2e1416;
  --danger-ink: #fca5a5;

  --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface-1));
  --accent-softer: color-mix(in srgb, var(--accent) 10%, var(--surface-1));
  --accent-line: color-mix(in srgb, var(--accent) 34%, transparent);

  --rail: #0b0d0f;
  --rail-ink: #e7e9ec;
  --rail-ink-subtle: #7d838d;
  --rail-line: #1c1f23;
  --rail-hover: #15181b;

  --scrim: rgb(0 0 0 / 0.66);
  --skeleton: #16191c;
  --skeleton-shine: #1f2327;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 16px 40px -8px rgb(0 0 0 / 0.6);
  --shadow-pop: 0 24px 60px -12px rgb(0 0 0 / 0.7);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCENT IDENTITIES
   One chromatic voice at a time. Each declares its own hue, a lighter hover,
   and the ink that sits on top of it — so contrast is decided per accent
   rather than assumed. Keys match the six the app already stores.
   ═══════════════════════════════════════════════════════════════════════════ */
:root,
:root[data-accent='lightblue'] {
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-press: #2563eb;
  --accent-ink: #ffffff;
}
:root[data-accent='violet'] {
  --accent: #8b7cf6;
  --accent-hover: #a394f8;
  --accent-press: #7461e8;
  --accent-ink: #ffffff;
}
:root[data-accent='emerald'] {
  --accent: #0d9488;
  --accent-hover: #14b8a6;
  --accent-press: #0b7c72;
  --accent-ink: #ffffff;
}
:root[data-accent='sunset'] {
  --accent: #3b6fe0;
  --accent-hover: #5b88ea;
  --accent-press: #2f5cc4;
  --accent-ink: #ffffff;
}
:root[data-accent='rose'] {
  --accent: #e2483d;
  --accent-hover: #ef6055;
  --accent-press: #c93b31;
  --accent-ink: #ffffff;
}
:root[data-accent='yellow'] {
  --accent: #d99e0b;
  --accent-hover: #eab308;
  --accent-press: #b98408;
  /* Gold needs dark ink to clear 4.5:1 — the others take white. */
  --accent-ink: #1a1205;
}

/* Dark mode lifts the darker accents so they stay legible on near-black. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light'])[data-accent='emerald'] {
    --accent: #14b8a6;
    --accent-hover: #2dd4bf;
    --accent-ink: #04211f;
  }
  :root:not([data-theme='light'])[data-accent='yellow'] {
    --accent: #eab308;
    --accent-hover: #facc15;
  }
  :root:not([data-theme='light'])[data-accent='rose'] {
    --accent: #f26055;
    --accent-hover: #f87c72;
  }
}
:root[data-theme='dark'][data-accent='emerald'] {
  --accent: #14b8a6;
  --accent-hover: #2dd4bf;
  --accent-ink: #04211f;
}
:root[data-theme='dark'][data-accent='yellow'] {
  --accent: #eab308;
  --accent-hover: #facc15;
}
:root[data-theme='dark'][data-accent='rose'] {
  --accent: #f26055;
  --accent-hover: #f87c72;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY ALIASES
   The ported markup and the original stylesheets still reference names from
   the old palette. Re-pointing them here is what recolours the entire app
   without touching a single component.

   The selector list carries (0,3,0) specificity on purpose: the legacy sheets
   set some of these under `:root[data-theme="dark"]` (0,2,0), and semantic
   roles defined above must win everywhere.
   ═══════════════════════════════════════════════════════════════════════════ */
:root,
:root[data-accent],
:root[data-theme],
:root[data-theme][data-accent] {
  /* Surfaces */
  --white: var(--surface-1);
  --card-bg: var(--surface-1);
  --page-bg: var(--canvas);
  --gray-bg: var(--canvas);
  --border: var(--line);

  /* Ink */
  --text: var(--ink);
  --text-muted: var(--ink-subtle);
  --plum: var(--ink);
  --plum-mid: var(--ink-muted);
  --plum-light: var(--line-strong);
  --plum-surface: var(--surface-4);

  /* Brand — the gradient becomes a flat accent. Depth now comes from the
     surface ladder, so a gradient on every button would fight it. */
  --brand-grad: var(--accent);
  --brand-grad-hover: var(--accent-hover);
  --on-brand: var(--accent-ink);
  --accent-light: var(--accent-hover);
  --accent-pale: var(--accent-soft);

  /* Decorative hues from the old palette, remapped onto semantic roles so
     the components that key off them stay meaningful. */
  --mauve: var(--accent);
  --mauve-light: var(--accent-soft);
  --coral: var(--danger);
  --coral-light: var(--danger-bg);
  --yellow: var(--warning);
  --yellow-light: var(--warning-bg);
  --gold: #d9a441;
  --gold-light: #f5d78e;
  --gold-deep: #b8862a;

  --shadow: var(--shadow-sm);
  --sidebar-w: 248px;
}