/* ============================================
   Birkly Admin — Birch v5 design tokens
   ============================================

   The only file allowed to hold raw colour values. Components never write
   dark rules; dark is its own scale, remapped below.

   Colours are oklch; the hex in each comment is the value it must round-trip
   to (Foundations board). Contrast is WCAG 2.1 against --surface.

   Whole pixels only: no half-pixel sizes, strokes, rings or offsets.

   P56 token names still used by page CSS live in core/migration-aliases.css
   until P96-M15.
   ============================================ */

:root {
  /* 1. Colour */
  --bg: oklch(96.74% 0.0029 84.6); /* #F5F4F2 · canvas */
  --bg-side: oklch(96.74% 0.0029 84.6); /* #F5F4F2 */
  --surface: oklch(99.67% 0.0013 106.4); /* #FEFEFD · slab, menu, field on canvas */
  --surface-2: oklch(95.16% 0.0027 106.4); /* #EFEFED · well, hover inside a slab */
  --surface-3: oklch(92.49% 0.0042 91.4); /* #E7E6E3 · pressed well, switch track */
  --line: oklch(91.8% 0.004 106.5); /* #E4E4E1 · hairline */
  --line-strong: oklch(85.75% 0.0043 91.5); /* #D1D0CD · secondary edge, dashed */
  --text: oklch(20.44% 0.0043 264.5); /* #161719 · ink · 17.8:1 */
  --text-2: oklch(40.05% 0.0043 247.9); /* #46484A · 9.1:1 */
  --text-3: oklch(52.0% 0.0053 258.3); /* #67696C · 5.5:1 · never on surface-3 */
  --accent: oklch(53.05% 0.1546 262.0); /* #3767C4 · on, selected, focus */
  --accent-hover: oklch(46.92% 0.1496 262.0); /* #2855AD */
  --accent-soft: oklch(94.32% 0.0271 260.3); /* #E2EDFF */
  --accent-line: oklch(83.0% 0.0704 262.5); /* #AFC8F6 */
  --accent-text: oklch(46.92% 0.1496 262.0); /* #2855AD · 5.9:1 */
  --on-accent: oklch(99.04% 0.0045 258.3); /* #FAFCFF · 5.2:1 */
  --mint: oklch(86.18% 0.1032 181.6); /* #7DE8D6 · the one main action */
  --mint-hover: oklch(81.85% 0.1102 182.1); /* #65DBC9 */
  --on-mint: oklch(22.14% 0.0339 181.8); /* #05201C · 11.7:1 */
  --success: oklch(46.93% 0.1192 148.1); /* #1C6C31 · 5.7:1 */
  --success-soft: oklch(94.91% 0.0443 148.3); /* #DBF7DE */
  --warning: oklch(45.92% 0.1002 67.5); /* #7C4B02 · 6.5:1 */
  --warning-soft: oklch(95.9% 0.0552 91.4); /* #FFF1C8 */
  --danger: oklch(50.09% 0.1704 24.9); /* #B02A2D · 5.6:1 */
  --danger-soft: oklch(95.09% 0.0245 26.9); /* #FFE9E6 */
  --info: oklch(47.05% 0.1402 255.0); /* #155AA7 · 6.0:1 */
  --info-soft: oklch(95.39% 0.0237 244.1); /* #E3F2FF */
  --on-status: oklch(99.67% 0.0013 106.4); /* #FEFEFD · text on a solid status fill */
  --ink-float: oklch(18.2% 0.0044 264.5); /* #111214 · tooltip, toast */
  --on-ink-float: oklch(98.45% 0.0026 106.4); /* #FAFAF8 · 17.9:1 */
  --scrim: rgb(22 23 25 / 0.32);
  --scroll-shade: rgb(32 34 29 / 0.12);

  /* Ramps for the few legacy call sites that read a step directly */
  --neutral-0: oklch(99.67% 0.0013 106.4); /* #FEFEFD */
  --neutral-50: oklch(98.48% 0.0013 106.4); /* #FAFAF9 */
  --neutral-75: oklch(96.74% 0.0029 84.6); /* #F5F4F2 */
  --neutral-90: oklch(95.16% 0.0027 106.4); /* #EFEFED */
  --neutral-100: oklch(92.49% 0.0042 91.4); /* #E7E6E3 */
  --neutral-200: oklch(91.8% 0.004 106.5); /* #E4E4E1 */
  --neutral-300: oklch(85.75% 0.0043 91.5); /* #D1D0CD */
  --neutral-400: oklch(76.67% 0.0044 91.5); /* #B4B3B0 */
  --neutral-500: oklch(68.93% 0.0031 264.5); /* #9A9B9D */
  --neutral-600: oklch(59.24% 0.0051 258.3); /* #7C7E81 */
  --neutral-700: oklch(40.05% 0.0043 247.9); /* #46484A */
  --neutral-800: oklch(30.8% 0.0046 248.0); /* #2E3032 */
  --neutral-900: oklch(20.44% 0.0043 264.5); /* #161719 */
  --neutral-950: oklch(18.2% 0.0044 264.5); /* #111214 */
  --mint-50: oklch(97.44% 0.0186 180.3); /* #EAFBF7 */
  --mint-100: oklch(94.4% 0.0407 181.2); /* #D0F6EE */
  --mint-200: oklch(90.24% 0.0717 182.8); /* #A9EFE3 */
  --mint-300: oklch(87.97% 0.0886 182.3); /* #92EBDC */
  --mint-400: oklch(86.18% 0.1032 181.6); /* #7DE8D6 */
  --mint-500: oklch(86.18% 0.1032 181.6); /* #7DE8D6 */
  --mint-600: oklch(81.85% 0.1102 182.1); /* #65DBC9 */
  --mint-700: oklch(71.37% 0.1104 180.6); /* #3FB9A6 */
  --mint-800: oklch(58.92% 0.0936 180.9); /* #2A8F80 */
  --mint-900: oklch(47.49% 0.0761 181.6); /* #1B6A5F */
  --mint-950: oklch(37.03% 0.0598 181.8); /* #0F4A42 */

  /* 2. Type — system stacks, whole pixels */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --size-display: 56px;    --lh-display: 60px;
  --size-number: 28px;     --lh-number: 32px;
  --size-page-title: 19px; --lh-page-title: 26px;
  --size-title-l: 17px;    --lh-title-l: 24px;
  --size-slab-title: 15px; --lh-slab-title: 22px;
  --size-title: 14px;      --lh-title: 20px;
  --size-body: 14px;       --lh-body: 21px;
  --size-small: 13px;      --lh-small: 18px;
  --size-caption: 12px;    --lh-caption: 16px;
  --size-mono: 13px;       --lh-mono: 20px;

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

  --tracking-display: -0.035em;
  --tracking-number: -0.025em;
  --tracking-title: -0.01em;
  --tracking-overline: 0.08em;

  /* 3. Space — 4px base; app UI stops at 24 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --gutter: var(--s-6);

  /* 4. Shape — one radius */
  --r: 6px;
  --r-inset: 3px;
  --r-pixel: 0;

  /* 5. Sizes that follow density (core/density.css) */
  --control: 34px;
  --control-sm: 30px;
  --control-xs: 26px;
  --chrome-row: 44px;
  --nav-row: 30px;
  --row-list: 44px;
  --row-table: 52px;
  --card-h: 108px;
  --icon: 13px;
  --icon-l: 26px;

  /* 6. Elevation — only what floats */
  --shadow-float-2: 0 2px 8px rgb(22 23 25 / 0.16);
  --shadow-menu: 0 0 0 1px rgb(22 23 25 / 0.06), 0 12px 32px -6px rgb(22 23 25 / 0.18);
  --shadow-sheet: 0 24px 64px -12px rgb(22 23 25 / 0.28);

  /* 7. Motion */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 640ms;
  --dur-px: 1s;
  --dur-frame: calc(var(--dur-px) / 8);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* 8. Focus */
  --focus-outline: 2px solid var(--accent);
  --focus-outline-offset: 1px;

  /* 9. Layering — popover above modal so menus inside dialogs work */
  --z-base: 0;
  --z-raised: 10;
  --z-dragging: 50;
  --z-sticky: 100;
  --z-chrome: 200;
  --z-backdrop: 300;
  --z-drawer: 310;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* 10. Shell */
  --sidebar-width: 232px;
  --sidebar-rail: 52px;
  --sidebar-rail-auto: 64px;
  --measure-sm: 42ch;
  --measure-md: 68ch;
  --measure-lg: 90ch;
  --page-max: 1440px;
  --page-max-narrow: 880px;

  /* 11. Third-party brand colours: the search preview mimics a Google result */
  --serp-title: #1A0DAB;
  --serp-url: #006621;
  --serp-desc: #545454;

  /* 12. Select chevron: the chev-down pixel icon as a background, filled --text-3 */
  --select-chev: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' shape-rendering='crispEdges' fill='%2367696C'><path d='M3 4h1v1h-1zM9 4h1v1h-1zM4 5h1v1h-1zM8 5h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1zM6 8h1v1h-1z'/></svg>");

  /* Breakpoints — documentation only; literal values in @media (min-width): 640 / 768 / 1024 / 1280 / 1440 */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;
}

[data-theme="dark"] {
  --bg: oklch(17.58% 0.0038 229.0); /* #0F1112 */
  --bg-side: oklch(17.58% 0.0038 229.0); /* #0F1112 */
  --surface: oklch(21.75% 0.0042 264.5); /* #191A1C */
  --surface-2: oklch(25.07% 0.0048 248.0); /* #202224 */
  --surface-3: oklch(28.42% 0.0062 258.4); /* #282A2D */
  --line: oklch(28.42% 0.0062 258.4); /* #282A2D */
  --line-strong: oklch(37.11% 0.0073 264.5); /* #3E4044 */
  --text: oklch(95.46% 0.0027 106.4); /* #F0F0EE · 15.3:1 */
  --text-2: oklch(79.14% 0.0048 258.3); /* #B9BBBE · 9.0:1 */
  --text-3: oklch(65.95% 0.0063 264.5); /* #909296 · 5.6:1 */
  --accent: oklch(72.09% 0.1298 261.7); /* #77A4F6 */
  --accent-hover: oklch(77.73% 0.1132 260.9); /* #8DB7FF */
  --accent-soft: oklch(29.98% 0.0605 262.6); /* #1D2D4C */
  --accent-line: oklch(44.94% 0.0902 262.2); /* #395487 */
  --accent-text: oklch(78.97% 0.1063 261.2); /* #94BBFF · 7.0:1 */
  --on-accent: oklch(17.87% 0.0311 263.3); /* #0A111F · 7.5:1 */
  --mint: oklch(83.17% 0.1082 181.2); /* #6DDFCC */
  --mint-hover: oklch(87.98% 0.0981 181.0); /* #89EDDB */
  --on-mint: oklch(22.14% 0.0339 181.8); /* #05201C · 10.6:1 */
  --success: oklch(80.03% 0.1505 148.1); /* #73D885 */
  --success-soft: oklch(29.95% 0.0536 148.3); /* #19351E */
  --warning: oklch(84.06% 0.1398 82.0); /* #F8C153 */
  --warning-soft: oklch(32.92% 0.0648 81.0); /* #463104 */
  --danger: oklch(75.63% 0.1458 25.1); /* #FF8880 */
  --danger-soft: oklch(32.05% 0.0754 24.5); /* #53211F */
  --info: oklch(79.02% 0.1082 254.4); /* #8ABEFF */
  --info-soft: oklch(30.99% 0.0642 254.8); /* #183150 */
  --on-status: oklch(17.58% 0.0038 229.0); /* #0F1112 */
  --ink-float: oklch(95.76% 0.0027 106.4); /* #F1F1EF */
  --on-ink-float: oklch(18.2% 0.0044 264.5); /* #111214 · 16.6:1 */
  --scrim: rgb(0 0 0 / 0.56);
  --scroll-shade: rgb(0 0 0 / 0.5);
  --shadow-float-2: 0 2px 8px rgb(0 0 0 / 0.5);
  --shadow-menu: 0 0 0 1px var(--line-strong), 0 12px 32px -6px rgb(0 0 0 / 0.6);
  --shadow-sheet: 0 24px 64px -12px rgb(0 0 0 / 0.7);
  --serp-title: var(--accent-text);
  --serp-url: var(--success);
  --serp-desc: var(--text-2);
  --select-chev: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' shape-rendering='crispEdges' fill='%23909296'><path d='M3 4h1v1h-1zM9 4h1v1h-1zM4 5h1v1h-1zM8 5h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1zM6 8h1v1h-1z'/></svg>");
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --bg: oklch(17.58% 0.0038 229.0); /* #0F1112 */
    --bg-side: oklch(17.58% 0.0038 229.0); /* #0F1112 */
    --surface: oklch(21.75% 0.0042 264.5); /* #191A1C */
    --surface-2: oklch(25.07% 0.0048 248.0); /* #202224 */
    --surface-3: oklch(28.42% 0.0062 258.4); /* #282A2D */
    --line: oklch(28.42% 0.0062 258.4); /* #282A2D */
    --line-strong: oklch(37.11% 0.0073 264.5); /* #3E4044 */
    --text: oklch(95.46% 0.0027 106.4); /* #F0F0EE · 15.3:1 */
    --text-2: oklch(79.14% 0.0048 258.3); /* #B9BBBE · 9.0:1 */
    --text-3: oklch(65.95% 0.0063 264.5); /* #909296 · 5.6:1 */
    --accent: oklch(72.09% 0.1298 261.7); /* #77A4F6 */
    --accent-hover: oklch(77.73% 0.1132 260.9); /* #8DB7FF */
    --accent-soft: oklch(29.98% 0.0605 262.6); /* #1D2D4C */
    --accent-line: oklch(44.94% 0.0902 262.2); /* #395487 */
    --accent-text: oklch(78.97% 0.1063 261.2); /* #94BBFF · 7.0:1 */
    --on-accent: oklch(17.87% 0.0311 263.3); /* #0A111F · 7.5:1 */
    --mint: oklch(83.17% 0.1082 181.2); /* #6DDFCC */
    --mint-hover: oklch(87.98% 0.0981 181.0); /* #89EDDB */
    --on-mint: oklch(22.14% 0.0339 181.8); /* #05201C · 10.6:1 */
    --success: oklch(80.03% 0.1505 148.1); /* #73D885 */
    --success-soft: oklch(29.95% 0.0536 148.3); /* #19351E */
    --warning: oklch(84.06% 0.1398 82.0); /* #F8C153 */
    --warning-soft: oklch(32.92% 0.0648 81.0); /* #463104 */
    --danger: oklch(75.63% 0.1458 25.1); /* #FF8880 */
    --danger-soft: oklch(32.05% 0.0754 24.5); /* #53211F */
    --info: oklch(79.02% 0.1082 254.4); /* #8ABEFF */
    --info-soft: oklch(30.99% 0.0642 254.8); /* #183150 */
    --on-status: oklch(17.58% 0.0038 229.0); /* #0F1112 */
    --ink-float: oklch(95.76% 0.0027 106.4); /* #F1F1EF */
    --on-ink-float: oklch(18.2% 0.0044 264.5); /* #111214 · 16.6:1 */
    --scrim: rgb(0 0 0 / 0.56);
    --scroll-shade: rgb(0 0 0 / 0.5);
    --shadow-float-2: 0 2px 8px rgb(0 0 0 / 0.5);
    --shadow-menu: 0 0 0 1px var(--line-strong), 0 12px 32px -6px rgb(0 0 0 / 0.6);
    --shadow-sheet: 0 24px 64px -12px rgb(0 0 0 / 0.7);
    --serp-title: var(--accent-text);
    --serp-url: var(--success);
    --serp-desc: var(--text-2);
    --select-chev: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' shape-rendering='crispEdges' fill='%23909296'><path d='M3 4h1v1h-1zM9 4h1v1h-1zM4 5h1v1h-1zM8 5h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1zM6 8h1v1h-1z'/></svg>");
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
    --dur-px: 0ms;
  }
}