/* Siderail design tokens.
   Three tiers: primitives (raw scales, never used by components), semantic roles (the only tier
   that changes per theme, written once with light-dark()), and component-local aliases (kept in
   each component's own file). Component CSS uses semantic tokens and scales only.
   Contract: docs/ui/CONVENTIONS.md. Changes go through the orchestrator. */
@layer reset, tokens, base, components, utilities;

@layer tokens {
  :root {
    /* Primitives. Generated by web/tools/palette.mjs (`make palette`); do not edit by hand.
       primary = Mantine colors-generator from #222045; green/amber/red/blue = OKLCH on the primary
       lightness ladder (same index = same perceived lightness); gray = tinted neutral ladder;
       dark = dark-mode surfaces (0 lightest, 9 page background). */
    /* palette:begin (generated) */
    --primary-0: #f1f1f9; --primary-1: #e0dfeb; --primary-2: #bebcd8; --primary-3: #9a96c6; --primary-4: #7b76b6; --primary-5: #6862ad; --primary-6: #5e58aa; --primary-7: #4e4995; --primary-8: #454086; --primary-9: #222045;
    --green-0: #e9f6eb; --green-1: #cee9d2; --green-2: #98d0a3; --green-3: #56b46e; --green-4: #0b9947; --green-5: #05843c; --green-6: #047a36; --green-7: #01672d; --green-8: #035b27; --green-9: #012f11;
    --amber-0: #feefde; --amber-1: #fddab0; --amber-2: #f5b052; --amber-3: #d48b03; --amber-4: #ad7107; --amber-5: #966102; --amber-6: #8a5903; --amber-7: #754b03; --amber-8: #684201; --amber-9: #362001;
    --red-0: #feeeec; --red-1: #fdd6d2; --red-2: #f4a9a2; --red-3: #eb736c; --red-4: #d94040; --red-5: #c7202a; --red-6: #bd0d21; --red-7: #a20118; --red-8: #900315; --red-9: #4e0006;
    --blue-0: #ebf3fe; --blue-1: #d1e2fc; --blue-2: #9fc2f4; --blue-3: #669def; --blue-4: #357ce3; --blue-5: #1a69d3; --blue-6: #0c5fc9; --blue-7: #0250ae; --blue-8: #00469c; --blue-9: #002354;
    --gray-0: #f8f9fb; --gray-1: #f3f3f6; --gray-2: #eaebef; --gray-3: #e1e1e7; --gray-4: #d3d4dc; --gray-5: #8d8e99; --gray-6: #656673; --gray-7: #4d4f5b; --gray-8: #31323c; --gray-9: #17181d;
    --dark-0: #c8cad3; --dark-1: #a2a4b0; --dark-2: #7d7f8e; --dark-3: #686b79; --dark-4: #383a46; --dark-5: #2a2c36; --dark-6: #24252e; --dark-7: #1e1f27; --dark-8: #16171d; --dark-9: #0f1014;
    /* palette:end */
    --white: #ffffff;
    --black: #000000;
  }

  /* Theme selection. :root follows the OS; [data-theme] forces a theme on the page or on any
     subtree (the style guide uses this on demo stages). light-dark() resolves per element. */
  :root { color-scheme: light dark; }
  [data-theme="light"] { color-scheme: light; }
  [data-theme="dark"] { color-scheme: dark; }

  :root {
    /* ---- Semantic colour roles: light-dark(light, dark) ---- */

    /* Surfaces */
    --color-bg: light-dark(var(--gray-0), var(--dark-9));               /* page background */
    --color-surface: light-dark(var(--white), var(--dark-8));           /* cards, sidebar, inputs */
    --color-surface-raised: light-dark(var(--white), var(--dark-7));    /* menus, popovers, dialogs */
    --color-surface-muted: light-dark(var(--gray-1), var(--dark-7));    /* table heads, code, wells */
    --color-hover: light-dark(var(--gray-2), var(--dark-6));            /* neutral hover fill */
    --color-pressed: light-dark(var(--gray-3), var(--dark-5));          /* neutral pressed/selected fill */
    --color-scrim: light-dark(rgb(23 24 29 / 0.42), rgb(0 0 0 / 0.6));  /* behind dialogs and drawers */
    --color-scrim-media: light-dark(rgb(23 24 29 / 0.62), rgb(0 0 0 / 0.62)); /* under text on photos ("Change photo"); text: --color-on-inverse */

    /* Overlay ladder (Minimals' grey-500 at 8/16/24/32/48%). Translucent, so they work on any surface:
       layer them over the surface rather than replacing it. Opaque --color-hover/--color-pressed stay
       the default for list rows and menu items. */
    --overlay-color: light-dark(var(--gray-5), var(--dark-1));
    --color-overlay-hover: color-mix(in srgb, var(--overlay-color) 8%, transparent);     /* hover on any surface */
    --color-overlay-selected: color-mix(in srgb, var(--overlay-color) 16%, transparent); /* selected, toggled */
    --color-overlay-border: color-mix(in srgb, var(--overlay-color) 24%, transparent);   /* soft borders, focus fill */
    --color-overlay-pressed: color-mix(in srgb, var(--overlay-color) 32%, transparent);  /* pressed, soft-hover */
    --color-overlay-outline: color-mix(in srgb, var(--overlay-color) 48%, transparent);  /* switch track off, strong outline */

    /* Borders */
    --color-border: light-dark(var(--gray-3), var(--dark-5));           /* dividers, card edges (decorative) */
    --color-border-strong: light-dark(var(--gray-4), var(--dark-4));    /* outline buttons, table edges */
    --color-border-control: light-dark(var(--gray-5), var(--dark-3));   /* input/checkbox boundaries, 3:1 */

    /* Text */
    --color-text: light-dark(var(--gray-9), var(--gray-1));
    --color-text-muted: light-dark(var(--gray-6), var(--dark-1));       /* secondary text, placeholders, 4.5:1 */
    --color-text-disabled: light-dark(var(--gray-5), var(--dark-3));    /* disabled only (exempt from AA) */
    --color-inverse: light-dark(var(--gray-8), var(--dark-4));          /* tooltip / toast background */
    --color-on-inverse: light-dark(var(--white), var(--gray-1));

    /* Accent: links, focus, active navigation, selection, checked controls */
    --color-accent: light-dark(var(--primary-6), var(--primary-3));
    --color-accent-hover: light-dark(var(--primary-7), var(--primary-2));
    --color-accent-soft: light-dark(var(--primary-0), color-mix(in srgb, var(--primary-6) 20%, var(--dark-8)));
    --color-accent-soft-hover: light-dark(var(--primary-1), color-mix(in srgb, var(--primary-6) 30%, var(--dark-8)));
    --color-accent-text: light-dark(var(--primary-7), var(--primary-2)); /* text on accent-soft */
    --color-on-accent: light-dark(var(--white), var(--primary-9));       /* text on a filled accent (checkbox tick) */
    --color-selection: light-dark(var(--primary-1), color-mix(in srgb, var(--primary-6) 45%, var(--dark-8)));

    /* Primary fill: the main call to action. Never primary-9 in dark mode. */
    --color-primary: light-dark(var(--primary-9), var(--primary-2));
    --color-primary-hover: light-dark(var(--primary-8), var(--primary-1));
    --color-on-primary: light-dark(var(--white), var(--primary-9));

    /* Neutral "default" colour for labels, chips and soft buttons */
    --color-neutral: light-dark(var(--gray-6), var(--dark-1));
    --color-neutral-text: light-dark(var(--gray-7), var(--dark-0));
    --color-neutral-soft: light-dark(var(--gray-2), var(--dark-6));
    --color-neutral-soft-hover: light-dark(var(--gray-3), var(--dark-5));
    --color-neutral-filled: light-dark(var(--gray-8), var(--gray-2));
    --color-neutral-filled-hover: light-dark(var(--gray-9), var(--gray-1));
    --color-on-neutral-filled: light-dark(var(--white), var(--gray-9));
    --color-neutral-border: light-dark(var(--gray-5), var(--dark-2));

    /* Status. Each has: base (icons, dots, 3:1), -text (text on bg/surface/soft, 4.5:1),
       -soft / -soft-hover (tinted backgrounds), -filled / -filled-hover / on-* (solid), -border (outline). */
    --color-success: light-dark(var(--green-6), var(--green-3));
    --color-success-text: light-dark(var(--green-7), var(--green-2));
    --color-success-soft: light-dark(var(--green-0), color-mix(in srgb, var(--green-6) 18%, var(--dark-8)));
    --color-success-soft-hover: light-dark(var(--green-1), color-mix(in srgb, var(--green-6) 28%, var(--dark-8)));
    --color-success-filled: light-dark(var(--green-6), var(--green-3));
    --color-success-filled-hover: light-dark(var(--green-7), var(--green-2));
    --color-on-success: light-dark(var(--white), var(--green-9));
    --color-success-border: light-dark(var(--green-4), var(--green-4));

    --color-warning: light-dark(var(--amber-6), var(--amber-3));
    --color-warning-text: light-dark(var(--amber-7), var(--amber-2));
    --color-warning-soft: light-dark(var(--amber-0), color-mix(in srgb, var(--amber-6) 20%, var(--dark-8)));
    --color-warning-soft-hover: light-dark(var(--amber-1), color-mix(in srgb, var(--amber-6) 30%, var(--dark-8)));
    --color-warning-filled: light-dark(var(--amber-2), var(--amber-3));  /* amber fills take dark text */
    --color-warning-filled-hover: light-dark(var(--amber-3), var(--amber-2));
    --color-on-warning: light-dark(var(--amber-9), var(--amber-9));
    --color-warning-border: light-dark(var(--amber-4), var(--amber-4));

    --color-danger: light-dark(var(--red-6), var(--red-3));
    --color-danger-text: light-dark(var(--red-7), var(--red-2));
    --color-danger-soft: light-dark(var(--red-0), color-mix(in srgb, var(--red-6) 20%, var(--dark-8)));
    --color-danger-soft-hover: light-dark(var(--red-1), color-mix(in srgb, var(--red-6) 30%, var(--dark-8)));
    --color-danger-filled: light-dark(var(--red-6), var(--red-3));
    --color-danger-filled-hover: light-dark(var(--red-7), var(--red-2));
    --color-on-danger: light-dark(var(--white), var(--red-9));
    --color-danger-border: light-dark(var(--red-4), var(--red-4));

    --color-info: light-dark(var(--blue-6), var(--blue-3));
    --color-info-text: light-dark(var(--blue-7), var(--blue-2));
    --color-info-soft: light-dark(var(--blue-0), color-mix(in srgb, var(--blue-6) 20%, var(--dark-8)));
    --color-info-soft-hover: light-dark(var(--blue-1), color-mix(in srgb, var(--blue-6) 30%, var(--dark-8)));
    --color-info-filled: light-dark(var(--blue-6), var(--blue-3));
    --color-info-filled-hover: light-dark(var(--blue-7), var(--blue-2));
    --color-on-info: light-dark(var(--white), var(--blue-9));
    --color-info-border: light-dark(var(--blue-4), var(--blue-4));

    /* Component roles: aliases today, separate so they can diverge without touching components. */
    /* Switch thumb: white in light mode; near-black in dark mode, because a light thumb fails 3:1 on
       the light dark-mode tracks (text-muted hover, accent/primary "on"). */
    --color-switch-thumb: light-dark(var(--white), var(--dark-9));
    --color-rating: var(--color-warning);

    /* Toast fills stay pastel in both themes, with dark text. */
    --color-toast-success: #89fba6;
    --color-toast-warning: #ffd9a6;
    --color-toast-error: #ffa9a4;
    --color-toast-info: #a6d4ff;
    --color-on-toast: var(--gray-9);
    --color-toast-action-bg: rgb(0 0 0 / 0.08);
    --color-toast-action-hover: rgb(0 0 0 / 0.16);

    /* Chart palette (UI-11, chosen by ui-islands and checked for colour-vision deficiency): eight
       categorical series colours, literal values rather than primitive ladders because each is a
       single tuned stop. Slots 3-5 (green, amber, pink) are under 3:1 on white by design: charts
       always carry a legend, direct labels or a data table, so colour is never the only cue
       (WCAG 1.4.1, 1.4.11 exception for information conveyed elsewhere). They are therefore not in
       the contrast check. Use in order; never use them as text colours. */
    --chart-1: light-dark(#5e58aa, #9085e9);
    --chart-2: light-dark(#eb6834, #d95926);
    --chart-3: light-dark(#1baf7a, #199e70);
    --chart-4: light-dark(#eda100, #c98500);
    --chart-5: light-dark(#e87ba4, #d55181);
    --chart-6: light-dark(#008300, #008300);
    --chart-7: light-dark(#2a78d6, #3987e5);
    --chart-8: light-dark(#e34948, #e66767);

    /* Focus */
    --focus-color: var(--color-accent);
    --focus-ring: 2px solid var(--focus-color);
    --focus-offset: 2px;
    --focus-halo: 0 0 0 3px var(--color-accent-soft-hover);             /* soft glow on focused inputs */

    /* ---- Typography ---- */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --font-features: "cv11", "ss01";

    /* One Inter scale on a 4px line grid (docs/ui/reference-analysis.md §1.2). Each size has a
       matching line height: font: var(--weight-medium) var(--text-md)/var(--line-md) var(--font-sans). */
    --text-xs: 12px;    --line-xs: 16px;    /* captions, field labels (600), table heads */
    --text-sm: 13px;    --line-sm: 20px;    /* helper and error text, small controls, code */
    --text-md: 14px;    --line-md: 20px;    /* controls, menus, tables, nav, secondary body */
    --text-base: 15px;  --line-base: 24px;  /* body copy */
    --text-lg: 16px;    --line-lg: 24px;    /* card titles, lg inputs (avoids iOS zoom) */
    --text-xl: 18px;    --line-xl: 28px;    /* section titles, dialog titles */
    --text-2xl: 20px;   --line-2xl: 28px;
    --text-3xl: 24px;   --line-3xl: 32px;   /* page titles */
    --text-4xl: 30px;   --line-4xl: 36px;   /* display numbers */
    --text-5xl: 36px;   --line-5xl: 44px;
    --text-6xl: 48px;   --line-6xl: 56px;   /* hero numbers, marketing-size headings (rare) */

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;  /* headings h3-h6, labels, buttons */
    --weight-bold: 700;      /* large headings (h1/h2 at 30px+), strong numbers */

    /* Unitless line heights for multi-line text where the size is not on the scale. */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-body: 1.6;          /* 15/24: body copy on the 4px grid */

    --tracking-tight: -0.02em;   /* 30px and up */
    --tracking-snug: -0.01em;    /* 20-24px */
    --tracking-normal: 0;        /* 18px and below */
    --tracking-wide: 0.01em;     /* 12px semibold labels */

    /* ---- Spacing (4px base) ---- */
    --space-0: 0;
    --space-05: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ---- Sizes ---- */
    --control-xs: 28px;   /* compact icon buttons inside other components (alert close, chip actions) */
    --control-sm: 30px;
    --control-md: 36px;
    --control-lg: 40px;
    --control-px-sm: 10px;
    --control-px-md: 14px;
    --control-px-lg: 16px;
    --icon-xs: 14px;      /* labels, sm chips */
    --icon-sm: 16px;
    --icon-md: 18px;
    --icon-lg: 20px;
    --icon-xl: 24px;      /* nav rail, empty states */
    /* Checkbox and radio box sizes. */
    --check-sm: 16px;
    --check-md: 18px;
    --check-lg: 20px;
    /* Row heights for list, tree, accordion, menu, table and nav rows (min-height; rows may grow). */
    --row-xs: 28px;
    --row-sm: 32px;
    --row-md: 36px;
    --row-lg: 40px;
    --row-xl: 48px;
    --row-2xl: 56px;      /* two-line rows */
    /* Tag heights shared by label, chip and badge. */
    --tag-xs: 20px;
    --tag-sm: 24px;
    --tag-md: 28px;
    --tag-lg: 32px;

    /* ---- Radii ---- Prefer the role names; the size names stay for one-off shapes. */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-full: 9999px;
    --radius-check: var(--radius-xs);    /* checkbox */
    --radius-control: var(--radius-sm);  /* buttons, inputs, selects, menu items, tooltips, labels */
    --radius-popover: var(--radius-md);  /* menus, popovers, alerts, list items in surfaces */
    --radius-toast: var(--radius-md);    /* toasts, date-picker panel */
    --radius-card: var(--radius-md);     /* cards, form panels */
    --radius-dialog: var(--radius-md);   /* dialogs, drawer inner edge */

    /* ---- Shadows ---- Minimals' customShadows with the leftward offsets removed (centred).
       Light: gray-5 at the analysed alphas. Dark: black, plus a hairline ring so surfaces separate. */
    --shadow-color: light-dark(var(--gray-5), var(--black));
    --shadow-1:                                                         /* z1: segmented thumb, slider thumb */
      0 1px 2px 0 color-mix(in srgb, var(--shadow-color) 16%, transparent);
    --shadow-card:
      0 0 0 1px light-dark(transparent, var(--dark-6)),
      0 0 2px 0 color-mix(in srgb, var(--shadow-color) 20%, transparent),
      0 12px 24px -4px color-mix(in srgb, var(--shadow-color) 12%, transparent);
    --shadow-raised:                                                    /* z8: expanded accordion, dragged item */
      0 0 0 1px light-dark(transparent, var(--dark-5)),
      0 8px 16px 0 color-mix(in srgb, var(--shadow-color) 16%, transparent);
    --shadow-dropdown:                                                  /* menus, popovers, combobox, pickers */
      0 0 0 1px light-dark(transparent, var(--dark-4)),
      0 0 2px 0 color-mix(in srgb, var(--shadow-color) 24%, transparent),
      0 20px 40px -4px color-mix(in srgb, var(--shadow-color) 24%, transparent);
    --shadow-dialog:                                                    /* dialogs, drawers */
      0 0 0 1px light-dark(transparent, var(--dark-4)),
      0 40px 80px -8px light-dark(rgb(0 0 0 / 0.24), rgb(0 0 0 / 0.48));

    /* ---- Stacking (top-layer <dialog>/[popover] ignore these) ---- */
    --z-raised: 1;
    --z-sticky: 10;
    --z-header: 20;
    --z-drawer: 30;
    --z-overlay: 40;
    --z-dialog: 50;
    --z-popover: 60;
    --z-toast: 70;
    --z-tooltip: 80;

    /* ---- Breakpoints (reference values: custom properties do not work inside @media,
       so media queries use these literal widths) ---- */
    --bp-sm: 520px;   /* phones: stack actions, full-width inputs */
    --bp-md: 860px;   /* sidebar becomes a drawer */
    --bp-lg: 1180px;  /* two-column layouts collapse */
    --bp-xl: 1440px;  /* content max width */

    /* ---- Motion (approved in the proof: unhurried, ease-out, never bouncy) ---- */
    --t-fast: 240ms;  /* hover/colour changes, closing */
    --t: 360ms;       /* opening menus, toasts, most transitions */
    --t-slow: 520ms;  /* page entrance, drawers, large surfaces */
    --ease-out: cubic-bezier(0.2, 0, 0, 1);       /* entering */
    --ease-std: cubic-bezier(0.4, 0, 0.2, 1);     /* moving and colour changes */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);        /* leaving */

    /* ---- Layout ---- */
    --layout-gap: 24px;
    --sidebar-width: 248px;
    --rail-width: 64px;   /* collapsed navigation: icon rail */
    --topbar-height: 60px;
    --content-max: 1440px;
  }
}