/* Design tokens for the operator console. Ported verbatim from the shared Candor design system
 * (docs/design/CANDOR-DESIGN-SYSTEM.md in the sibling repo) EXCEPT the accent override at the
 * bottom of this file, which keeps Esta cocoa. Layers: primitives → semantic → component;
 * components use semantic tokens only. Light + dark via prefers-color-scheme. Re-run the design
 * system's Appendix A contrast script (and dataviz validate_palette.js for --chart-*) after any
 * colour edit — see the override block for the measured numbers. */

@font-face {
  font-family: "Roboto Flex";
  src: url("/static/fonts/roboto-flex-latin-wght.woff2") format("woff2");
  font-weight: 100 1000;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  /* ---- primitives: neutral ramp ("stone", warm grey-green) ---- */
  --stone-0: #ffffff;
  --stone-50: #fafaf8;
  --stone-100: #f1f2ee;
  --stone-200: #e4e6e0;
  --stone-400: #878e88;
  --stone-500: #66706a;
  --stone-600: #495049;
  --stone-800: #1b1e1c;

  /* ---- primitives: dark ramp ("night") ---- */
  --night-950: #111412;
  --night-900: #191d1b;
  --night-800: #212623;
  --night-700: #2e332f;
  --night-500: #626a64;
  --night-400: #8b948d;
  --night-300: #b4bbb5;
  --night-100: #edefec;

  /* ---- primitives: spruce accent ramp ---- */
  --spruce-100: #e3efea;
  --spruce-600: #146b57;
  --spruce-700: #0f5847;
  --spruce-300: #79d4b9;
  --spruce-350: #55c4a4;
  --spruce-450: #3fb392;
  --spruce-900: #17322b;
  --spruce-ink: #0a1410;

  /* ---- semantic: colour (light values) ---- */
  --color-bg: var(--stone-50);
  --color-surface: var(--stone-0);
  --color-surface-2: var(--stone-100);
  --color-line: var(--stone-200);        /* decorative hairlines, table gridlines */
  --color-line-strong: var(--stone-400); /* control boundaries — 3:1 vs surface (WCAG 1.4.11) */
  --color-ink: var(--stone-800);
  --color-ink-soft: var(--stone-600);
  --color-ink-faint: var(--stone-500);
  --color-accent: var(--spruce-600);        /* links, active nav, icons, bar fills, text on washes */
  --color-accent-strong: var(--spruce-700); /* hover/active text + solid hover */
  --color-accent-wash: var(--spruce-100);   /* tint backgrounds: active pill, selected row */
  --color-accent-solid: var(--spruce-600);  /* primary button background */
  --color-on-accent: #ffffff;               /* text on accent-solid */
  --color-success: #0e6f35;
  --color-success-wash: #eaf6ee;
  --color-warn: #92400e;
  --color-warn-wash: #faf0e4;
  --color-danger: #b42318;
  --color-danger-wash: #fbeae8;
  --color-info: #175cd3;
  --color-info-wash: #e7eefb;
  --color-focus: var(--spruce-600);
  --color-scrim: rgb(10 14 12 / 0.5); /* modal/drawer scrim, 40–60% [pro-rules] */

  /* ---- semantic: type ---- */
  --font-sans: "Roboto Flex", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  /* weight scale — the ONLY sanctioned font-weight values (guard test) */
  --fw-regular: 400; /* body, prose, table cells */
  --fw-medium: 500;  /* nav, buttons, labels, pills, display headline, emphasized numerals */
  --fw-bold: 700;    /* section/card titles, stat values, totals, wordmark */

  --fs-display: clamp(2.25rem, 1.4rem + 3.4vw, 3.375rem); /* landing hero, lh 1.06, ls -0.025em */
  --fs-title-xl: clamp(1.625rem, 1.3rem + 1.3vw, 2.125rem); /* landing sections, lh 1.15, ls -0.02em */
  --fs-title-lg: 1.375rem;  /* dashboard h1, lh 1.25, ls -0.015em */
  --fs-title: 1.125rem;     /* h2 / card titles, lh 1.3, ls -0.01em */
  --fs-lede: 1.25rem;       /* landing subhead, lh 1.5 */
  --fs-body: 1rem;          /* default body, lh 1.55 [ui-ux-pro-max: readable-font-size >=16px] */
  --fs-body-sm: 0.875rem;   /* tables, dashboard chrome, lh 1.5 */
  --fs-caption: 0.8125rem;  /* subs, notes, metric notes, lh 1.45 */
  --fs-micro: 0.75rem;      /* uppercase labels/eyebrows/th, lh 1.35, ls 0.06em, fw-medium */
  --ls-tight: -0.02em;
  --ls-caps: 0.06em;

  /* ---- semantic: space / shape / depth ---- */
  --sp-1: 0.25rem;  /* 4px */
  --sp-2: 0.5rem;   /* 8px */
  --sp-3: 0.75rem;  /* 12px */
  --sp-4: 1rem;     /* 16px */
  --sp-5: 1.25rem;  /* 20px */
  --sp-6: 1.5rem;   /* 24px */
  --sp-8: 2rem;     /* 32px */
  --sp-10: 2.5rem;  /* 40px */
  --sp-12: 3rem;    /* 48px */
  --sp-16: 4rem;    /* 64px */
  --sp-band: clamp(4rem, 9vw, 6.5rem);        /* landing section padding-block */
  --sp-band-hero: clamp(5.5rem, 13vw, 8.5rem);
  --measure-prose: 40rem;
  --container: 70rem;      /* landing content width (1120px) */
  --container-app: 75rem;  /* dashboard main width (1200px) */

  --r-sm: 6px;   /* inputs, buttons, code chips */
  --r-md: 10px;  /* cards, tiles, banners, receipt */
  --r-lg: 14px;  /* hero-level cards (empty-middle centre, login card) */
  --r-full: 999px; /* pills, bar tracks */
  --bw-1: 1px; /* hairline */
  --bw-2: 2px; /* focus outline, active-nav indicator */
  --bw-3: 3px; /* status left-edge on banners / inbound messages / middle-card top edge */

  --shadow-1: 0 1px 2px rgb(20 24 22 / 0.05), 0 1px 3px rgb(20 24 22 / 0.06);
  --shadow-2: 0 2px 4px rgb(20 24 22 / 0.05), 0 8px 20px rgb(20 24 22 / 0.07);
  --shadow-3: 0 4px 10px rgb(20 24 22 / 0.07), 0 20px 44px rgb(20 24 22 / 0.12);

  /* ---- semantic: motion [emil: custom curves; never ease-in on UI] ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 120ms; /* hover colour/underline, tooltip fade */
  --dur-base: 160ms; /* press feedback, small reveals */
  --dur-slow: 240ms; /* the largest UI transition allowed [emil: UI < 300ms] */

  /* ---- z ---- */
  --z-nav: 10;
  --z-tip: 20;
  --z-modal: 40;

  /* ---- v2 additions: inverse surface (the ink-filled active pill, dashboard v2 §2) ---- */
  --color-inverse-surface: var(--stone-800);
  --color-on-inverse: var(--stone-0); /* 16.81:1 light / 16.03:1 dark */

  /* ---- v2 additions: chart roles (dashboard v2 §2; dataviz validate_palette.js, all six checks
   * pass in both modes as a 2-slot palette). Brand spruce itself fails the chart-mark chroma floor,
   * so the hue was held and the step nudged — these are chart marks ONLY, never status. ---- */
  --chart-1: #0f7a5c;                  /* highlighted / single series — 5.30:1 vs surface */
  --chart-2: #eb6834;                  /* second series ONLY when two are shown; never a status */
  --chart-dim: var(--stone-400);       /* de-emphasized context series — 3.36:1 vs surface */
  --chart-wash: rgb(15 122 92 / 0.12); /* decorative area fill under a --chart-1 line */
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--night-950);
    --color-surface: var(--night-900);
    --color-surface-2: var(--night-800);
    --color-line: var(--night-700);
    --color-line-strong: var(--night-500);
    --color-ink: var(--night-100);
    --color-ink-soft: var(--night-300);
    --color-ink-faint: var(--night-400);
    --color-accent: var(--spruce-350);
    --color-accent-strong: var(--spruce-300);
    --color-accent-wash: var(--spruce-900);
    --color-accent-solid: var(--spruce-450);
    --color-on-accent: var(--spruce-ink);
    --color-success: #52c07e;
    --color-success-wash: #1d2a21;
    --color-warn: #e0a93f;
    --color-warn-wash: #2b2517;
    --color-danger: #f07b6c;
    --color-danger-wash: #2d1b18;
    --color-info: #7aa9f7;
    --color-info-wash: #1a2332;
    --color-focus: var(--spruce-350);
    --color-scrim: rgb(0 0 0 / 0.6);
    --color-inverse-surface: var(--night-100);
    --color-on-inverse: var(--night-950);
    --chart-1: #2fa382;                   /* 5.42:1 vs surface */
    --chart-2: #d95926;                   /* 4.39:1 vs surface — marks only */
    --chart-dim: var(--night-500);        /* 3.05:1 vs surface */
    --chart-wash: rgb(47 163 130 / 0.16);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 2px 4px rgb(0 0 0 / 0.4), 0 8px 20px rgb(0 0 0 / 0.45);
    --shadow-3: 0 4px 10px rgb(0 0 0 / 0.45), 0 20px 44px rgb(0 0 0 / 0.55);
  }
}

/* ================================================================================================
 * ESTA COCOA ACCENT OVERRIDE  (the ONLY intentional divergence from the shared token file)
 * ------------------------------------------------------------------------------------------------
 * Everything above — neutrals, type scale, spacing, shape, shadows, motion, z — is kept identical
 * to the shared design system so the two consoles stay structurally the same file. Only the
 * *accent* is re-pointed: Esta's console has always been cocoa, and it stays cocoa. The primitives
 * below are the exact values that shipped in the pre-redesign esta.css (--brand / --brand-strong /
 * --brand-soft / --brand-ink), so the hue the operator sees today does not move.
 *
 * The spruce primitives above are left in place deliberately: they are dead here, but keeping the
 * upstream block byte-identical is what makes the next port a clean copy instead of a merge.
 *
 * Chart roles are NOT the raw brand colour. Brand cocoa is too dark/low-chroma to be a chart mark
 * (dataviz validate_palette.js fails it on the chroma floor in light and on the lightness band in
 * dark), so — same treatment the upstream file gives spruce — the hue is held and the *step* is
 * nudged: light #6d4425 -> #9a5a24, dark #cf9f6c -> #bd8543. --chart-2 becomes a cool teal-blue
 * (the upstream orange would collide with cocoa's own hue). Both modes: validate_palette.js
 * reports ALL CHECKS PASS as a 2-slot categorical palette.
 *
 * Contrast re-checked with the design system's Appendix A script; text pairs >= 4.5:1, non-text
 * affordances >= 3:1, both themes. Worst measured: 5.35:1 (chart-1 vs surface, dark) on the >= 3
 * rows and 6.17:1 (accent on accent-wash, dark) on the >= 4.5 rows. Re-run it after any edit here.
 * ============================================================================================== */

:root {
  /* ---- primitives: cocoa accent ramp (Esta brand) ---- */
  --cocoa-600: #6d4425;  /* links, active nav, icons, bar fills, primary button */
  --cocoa-700: #57351a;  /* hover/active text + solid hover */
  --cocoa-100: #efe3d3;  /* tint backgrounds: active pill, selected row, bar track */
  --cocoa-ink: #fff8f0;  /* text on cocoa-600 */
  --caramel-300: #e0b586; /* dark-mode hover */
  --caramel-400: #cf9f6c; /* dark-mode links/solid */
  --caramel-900: #332619; /* dark-mode wash */
  --caramel-ink: #251507; /* dark-mode text on solid */

  --color-accent: var(--cocoa-600);
  --color-accent-strong: var(--cocoa-700);
  --color-accent-wash: var(--cocoa-100);
  --color-accent-solid: var(--cocoa-600);
  --color-on-accent: var(--cocoa-ink);
  --color-focus: var(--cocoa-600);

  --chart-1: #9a5a24;                   /* 5.44:1 vs surface */
  --chart-2: #0d6e9c;                   /* second series ONLY when two are shown; never a status */
  --chart-dim: var(--stone-400);        /* unchanged neutral — 3.36:1 vs surface */
  --chart-wash: rgb(154 90 36 / 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-accent: var(--caramel-400);
    --color-accent-strong: var(--caramel-300);
    --color-accent-wash: var(--caramel-900);
    --color-accent-solid: var(--caramel-400);
    --color-on-accent: var(--caramel-ink);
    --color-focus: var(--caramel-400);

    --chart-1: #bd8543;                 /* 5.35:1 vs surface */
    --chart-2: #3f9bd0;                 /* 5.52:1 vs surface — marks only */
    --chart-dim: var(--night-500);      /* unchanged neutral — 3.05:1 vs surface */
    --chart-wash: rgb(189 133 67 / 0.16);
  }
}