/*
 * Design tokens.
 *
 * Two layers on purpose:
 *
 *   Primitives (--gray-700, --amber-500) are the raw palette. Never reference
 *   them outside this file.
 *   Semantics (--color-surface, --color-text-muted) are what components use.
 *
 * Everything downstream reads semantics only, which is what makes theming a
 * matter of reassigning a couple dozen variables rather than auditing every
 * rule. It is also why every --color-* token here resolves to a var() and never
 * to a literal: stylelint enforces that, so a hard-coded hex in a component is
 * caught in CI.
 *
 * There is one dark block rather than a @media copy plus an override copy.
 * The layout sets data-theme on <html> before first paint from the stored
 * preference or the OS setting, so the attribute is always authoritative and
 * the dark values cannot drift out of sync with themselves.
 */

:root {
  /* --- Primitives: neutrals -------------------------------------------- */

  /* Very slightly warm, so dense screens of text don't read as clinical. */
  --gray-0: #fff;
  --gray-25: #fbfbfa;
  --gray-50: #f6f6f4;
  --gray-100: #eeeeeb;
  --gray-200: #e2e2de;
  --gray-300: #cbcbc5;
  --gray-400: #a3a39c;
  --gray-500: #7c7c75;
  --gray-600: #5c5c57;
  --gray-700: #42423e;
  --gray-800: #2b2b28;
  --gray-850: #212120;
  --gray-900: #1a1a19;
  --gray-950: #121211;

  /* --- Primitives: brand ---------------------------------------------- */

  /* Magnolia leaf green — muted enough to sit behind data all day. */
  --green-50: #eef5f1;
  --green-100: #d6e8de;
  --green-200: #aed1bf;
  --green-300: #7fb49b;
  --green-400: #52947a;
  --green-500: #34775e;
  --green-600: #285f4b;
  --green-700: #1f4a3b;
  --green-800: #17372c;

  /* Magnolia blossom blush — the accent, used sparingly. */
  --blush-100: #f9e8e6;
  --blush-300: #e8b3ad;
  --blush-500: #c96f65;
  --blush-700: #9c4b43;

  /* --- Primitives: check-in deck -------------------------------------- */
  --deck-ink: #33301c;
  --deck-ink-soft: #4a4630;
  --deck-ink-deep: #242216;
  --deck-olive: #6b6b35;
  --deck-olive-deep: #54542a;
  --deck-green: #3f7a52;
  --deck-green-deep: #2f5e3e;
  --deck-terracotta: #a66940;
  --deck-terracotta-deep: #8f5636;
  --deck-terracotta-deepest: #73432a;
  --deck-plum: #814256;
  --deck-plum-deep: #5f3040;
  --deck-gold: #eccf6e;
  --deck-cream: #faf6ec;
  --deck-cream-deep: #f3ecdb;
  --deck-paper: #fffdf8;
  --deck-line: #e3dcc7;
  --deck-on-fill: #fdf9ef;

  /* --- Primitives: status --------------------------------------------- */
  --red-100: #fbe4e2;
  --red-300: #f0a8a1;
  --red-500: #cf4436;
  --red-600: #b03328;
  --red-700: #8a271e;
  --amber-100: #fdefd8;
  --amber-300: #f5cb84;
  --amber-500: #cf8b1e;
  --amber-600: #a96f13;
  --amber-700: #7e520d;
  --blue-100: #e0eaf8;
  --blue-300: #9dbbe6;
  --blue-500: #3f6fb5;
  --blue-600: #2f5794;
  --blue-700: #234371;
  --violet-100: #eae5f8;
  --violet-300: #bdaee8;
  --violet-500: #6f56b5;
  --violet-700: #453472;

  /* --- Primitives: chart series --------------------------------------- */

  /*
   * A categorical set validated for color-blind separation in this order, so
   * adjacent stacked segments stay distinguishable. The -dark steps are the same
   * hues re-stepped for the dark surface, not a separate palette. Keep the order.
   */
  --series-blue: #2a78d6;
  --series-orange: #eb6834;
  --series-aqua: #1baf7a;
  --series-yellow: #eda100;
  --series-magenta: #e87ba4;
  --series-green: #008300;
  --series-violet: #4a3aa7;
  --series-red: #e34948;
  --series-blue-dark: #3987e5;
  --series-orange-dark: #d95926;
  --series-aqua-dark: #199e70;
  --series-yellow-dark: #c98500;
  --series-magenta-dark: #d55181;
  --series-green-dark: #008300;
  --series-violet-dark: #9085e9;
  --series-red-dark: #e66767;

  /* --- Primitives: alpha washes --------------------------------------- */

  /* Overlays and shadows need alpha, which a solid scale cannot express. */
  --ink-alpha-lo: rgb(26 26 25 / 5%);
  --ink-alpha-mid: rgb(26 26 25 / 8%);
  --ink-alpha-hi: rgb(26 26 25 / 12%);
  --ink-alpha-drag: rgb(26 26 25 / 18%);
  --ink-alpha-scrim: rgb(26 26 25 / 45%);
  --black-alpha-lo: rgb(0 0 0 / 30%);
  --black-alpha-mid: rgb(0 0 0 / 40%);
  --black-alpha-hi: rgb(0 0 0 / 55%);
  --black-alpha-drag: rgb(0 0 0 / 65%);
  --black-alpha-scrim: rgb(0 0 0 / 65%);

  /* --- Semantics: surfaces -------------------------------------------- */

  /* In light mode elevation comes from shadow; in dark mode, from lightness. */
  --color-bg: var(--gray-50);
  --color-surface: var(--gray-0);
  --color-surface-sunken: var(--gray-100);
  --color-surface-raised: var(--gray-0);
  --color-surface-hover: var(--gray-50);
  --color-surface-active: var(--gray-100);
  --color-overlay: var(--ink-alpha-scrim);

  /* --- Semantics: borders --------------------------------------------- */
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-border-subtle: var(--gray-100);

  /* --- Semantics: text ------------------------------------------------ */
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-600);
  --color-text-subtle: var(--gray-500);
  --color-text-inverse: var(--gray-0);
  --color-text-link: var(--green-600);

  /* --- Semantics: brand ----------------------------------------------- */
  --color-primary: var(--green-500);
  --color-primary-hover: var(--green-600);
  --color-primary-active: var(--green-700);
  --color-primary-subtle: var(--green-50);
  --color-primary-border: var(--green-200);
  --color-primary-text: var(--green-700);
  --color-on-primary: var(--gray-0);
  --color-accent: var(--blush-500);
  --color-accent-subtle: var(--blush-100);

  /* --- Semantics: status ---------------------------------------------- */
  --color-danger: var(--red-500);
  --color-danger-hover: var(--red-600);
  --color-danger-subtle: var(--red-100);
  --color-danger-text: var(--red-700);
  --color-warning: var(--amber-500);
  --color-warning-subtle: var(--amber-100);
  --color-warning-text: var(--amber-700);
  --color-info: var(--blue-500);
  --color-info-subtle: var(--blue-100);
  --color-info-text: var(--blue-700);
  --color-success: var(--green-500);
  --color-success-subtle: var(--green-50);
  --color-success-text: var(--green-700);
  --color-neutral-subtle: var(--gray-100);
  --color-neutral-text: var(--gray-700);

  /* Ticket priority. Named by meaning so a priority rename is a one-line fix. */
  --color-priority-urgent: var(--red-500);
  --color-priority-high: var(--amber-500);
  --color-priority-normal: var(--blue-500);
  --color-priority-low: var(--gray-400);

  /* Contract hours health, matching ContractPeriod#status. */
  --color-hours-healthy: var(--green-500);
  --color-hours-at-risk: var(--amber-500);
  --color-hours-over: var(--red-500);

  /* --- Semantics: charts --------------------------------------------- */
  --color-series-first: var(--series-blue);
  --color-series-second: var(--series-orange);
  --color-series-third: var(--series-aqua);
  --color-series-fourth: var(--series-yellow);
  --color-series-fifth: var(--series-magenta);
  --color-series-sixth: var(--series-green);
  --color-series-seventh: var(--series-violet);
  --color-series-eighth: var(--series-red);
  --color-series-other: var(--gray-400);
  --color-chart-gain: var(--series-blue);
  --color-chart-loss: var(--series-red);
  --color-chart-line: var(--gray-600);
  --color-chart-grid: var(--gray-100);
  --color-chart-axis: var(--gray-300);

  /* --- Semantics: check-in deck --------------------------------------- */
  --color-deck-bg: var(--deck-cream);
  --color-deck-surface: var(--deck-paper);
  --color-deck-surface-sunken: var(--deck-cream-deep);
  --color-deck-text: var(--deck-ink);
  --color-deck-text-muted: var(--deck-ink-soft);
  --color-deck-label: var(--deck-olive-deep);
  --color-deck-line: var(--deck-line);
  --color-deck-accent: var(--deck-terracotta);
  --color-deck-accent-strong: var(--deck-terracotta-deep);
  --color-deck-accent-deepest: var(--deck-terracotta-deepest);
  --color-deck-bar: var(--deck-olive);
  --color-deck-on-fill: var(--deck-on-fill);
  --color-deck-housekeeping: var(--deck-olive);
  --color-deck-housekeeping-deep: var(--deck-olive-deep);
  --color-deck-overview: var(--deck-terracotta-deep);
  --color-deck-overview-deep: var(--deck-terracotta-deepest);
  --color-deck-delivery: var(--deck-plum);
  --color-deck-delivery-deep: var(--deck-plum-deep);
  --color-deck-log: var(--deck-ink);
  --color-deck-log-deep: var(--deck-ink-deep);
  --color-deck-custom: var(--deck-green);
  --color-deck-custom-deep: var(--deck-green-deep);
  --color-deck-delivered: var(--deck-olive);
  --color-deck-in-progress: var(--deck-gold);
  --color-deck-waiting: var(--deck-terracotta-deep);
  --color-deck-blocked: var(--deck-plum);
  --color-deck-planned: var(--deck-green);

  /* --- Focus ---------------------------------------------------------- */
  --color-focus-ring: var(--green-400);

  /* Scanners want dark-on-light whatever the theme, so these never flip. */
  --color-qr-ink: var(--gray-900);
  --color-qr-paper: var(--gray-0);

  /* --- Elevation ------------------------------------------------------ */
  --shadow-xs: 0 1px 2px var(--ink-alpha-lo);
  --shadow-sm: 0 1px 3px var(--ink-alpha-mid);
  --shadow-md: 0 4px 12px var(--ink-alpha-mid);
  --shadow-lg: 0 12px 32px var(--ink-alpha-hi);
  --shadow-drag: 0 8px 24px var(--ink-alpha-drag);
  --focus-ring:
    0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus-ring);

  /* --- Spacing: 4px base ---------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.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;
  --space-20: 5rem;

  /* --- Borders -------------------------------------------------------- */
  --border-width: 1px;
  --border-width-thick: 2px;

  /* --- Radii ---------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 999px;

  /* --- Typography ----------------------------------------------------- */
  --font-sans:
    ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", helvetica,
    arial, sans-serif;
  --font-serif:
    ui-serif, "Iowan Old Style", "Palatino Linotype", palatino, georgia, serif;
  --font-mono:
    ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", menlo, monospace;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.06em;
  --tracking-code: 0.2em;

  /* --- Layout --------------------------------------------------------- */
  --sidebar-width: 15rem;
  --sidebar-width-collapsed: 3.5rem;
  --topbar-height: 3.25rem;
  --content-max: 88rem;
  --prose-max: 42rem;
  --kanban-column-width: 19rem;
  --popover-width: 26rem;
  --toast-width: 24rem;
  --auth-panel-width: 22rem;

  /* --- Control sizes -------------------------------------------------- */
  --dot-size: 0.5rem;
  --checkbox-size: 1rem;
  --icon-button-size: 2rem;
  --input-width-duration: 6rem;

  /* --- Opacity -------------------------------------------------------- */
  --opacity-disabled: 0.5;
  --opacity-busy: 0.55;
  --opacity-partial: 0.55;
  --opacity-wash: 0.22;

  /* --- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 100ms var(--ease-out);
  --transition-base: 160ms var(--ease-out);
  --transition-slow: 260ms var(--ease-out);

  /* --- Z-index: named so stacking bugs are debuggable ----------------- */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/*
 * Dark theme. Mid-tone status fills swap direction: the saturated shade becomes
 * the text color and the deep shade becomes the backing, because a 500-weight
 * fill that reads well on white is unreadable on near-black.
 */
:root[data-theme="dark"] {
  --color-bg: var(--gray-950);
  --color-surface: var(--gray-900);
  --color-surface-sunken: var(--gray-950);
  --color-surface-raised: var(--gray-850);
  --color-surface-hover: var(--gray-850);
  --color-surface-active: var(--gray-800);
  --color-overlay: var(--black-alpha-scrim);
  --color-border: var(--gray-800);
  --color-border-strong: var(--gray-700);
  --color-border-subtle: var(--gray-850);
  --color-text: var(--gray-100);
  --color-text-muted: var(--gray-400);
  --color-text-subtle: var(--gray-500);
  --color-text-inverse: var(--gray-950);
  --color-text-link: var(--green-300);
  --color-primary: var(--green-400);
  --color-primary-hover: var(--green-300);
  --color-primary-active: var(--green-200);
  --color-primary-subtle: var(--green-800);
  --color-primary-border: var(--green-700);
  --color-primary-text: var(--green-200);
  --color-on-primary: var(--gray-950);
  --color-accent: var(--blush-300);
  --color-accent-subtle: var(--blush-700);
  --color-danger: var(--red-300);
  --color-danger-hover: var(--red-100);
  --color-danger-subtle: var(--red-700);
  --color-danger-text: var(--red-100);
  --color-warning: var(--amber-300);
  --color-warning-subtle: var(--amber-700);
  --color-warning-text: var(--amber-100);
  --color-info: var(--blue-300);
  --color-info-subtle: var(--blue-700);
  --color-info-text: var(--blue-100);
  --color-success: var(--green-300);
  --color-success-subtle: var(--green-800);
  --color-success-text: var(--green-100);
  --color-neutral-subtle: var(--gray-800);
  --color-neutral-text: var(--gray-300);
  --color-priority-urgent: var(--red-300);
  --color-priority-high: var(--amber-300);
  --color-priority-normal: var(--blue-300);
  --color-priority-low: var(--gray-500);
  --color-hours-healthy: var(--green-300);
  --color-hours-at-risk: var(--amber-300);
  --color-hours-over: var(--red-300);
  --color-focus-ring: var(--green-300);
  --color-series-first: var(--series-blue-dark);
  --color-series-second: var(--series-orange-dark);
  --color-series-third: var(--series-aqua-dark);
  --color-series-fourth: var(--series-yellow-dark);
  --color-series-fifth: var(--series-magenta-dark);
  --color-series-sixth: var(--series-green-dark);
  --color-series-seventh: var(--series-violet-dark);
  --color-series-eighth: var(--series-red-dark);
  --color-series-other: var(--gray-600);
  --color-chart-gain: var(--series-blue-dark);
  --color-chart-loss: var(--series-red-dark);
  --color-chart-line: var(--gray-300);
  --color-chart-grid: var(--gray-850);
  --color-chart-axis: var(--gray-700);

  /* Shadows read as noise on dark surfaces; borders carry elevation instead. */
  --shadow-xs: 0 1px 2px var(--black-alpha-lo);
  --shadow-sm: 0 1px 3px var(--black-alpha-mid);
  --shadow-md: 0 4px 12px var(--black-alpha-mid);
  --shadow-lg: 0 12px 32px var(--black-alpha-hi);
  --shadow-drag: 0 8px 24px var(--black-alpha-drag);
}