/* ==========================================================================
   EstimationForge Design 2.0 — Material 3 token layer
   Seed: brand ink-blue #17589E → full M3 tonal system.
   Light scheme lives on BOTH `:root` and `[data-theme='light']` so a page can
   scope a light frame inside a dark document (and vice versa). Dark lives on
   `[data-theme='dark']`, with a prefers-color-scheme fallback for pages that
   never set data-theme. Every value is a CSS custom property prefixed --m3-*.
   Palette rationale: .design-sync/learnings/M3-RESEARCH.md
   ========================================================================== */

:root {
  /* ---- Type ---- */
  --m3-font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --m3-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* M3 type scale (size / line-height / weight) — Hanken Grotesk */
  --m3-type-display-lg: 700 57px/64px var(--m3-font-sans);
  --m3-type-display-md: 700 45px/52px var(--m3-font-sans);
  --m3-type-display-sm: 600 36px/44px var(--m3-font-sans);
  --m3-type-headline-lg: 600 32px/40px var(--m3-font-sans);
  --m3-type-headline-md: 600 28px/36px var(--m3-font-sans);
  --m3-type-headline-sm: 600 24px/32px var(--m3-font-sans);
  --m3-type-title-lg: 600 22px/28px var(--m3-font-sans);
  --m3-type-title-md: 600 16px/24px var(--m3-font-sans);
  --m3-type-title-sm: 600 14px/20px var(--m3-font-sans);
  --m3-type-body-lg: 400 16px/24px var(--m3-font-sans);
  --m3-type-body-md: 400 14px/20px var(--m3-font-sans);
  --m3-type-body-sm: 400 12px/16px var(--m3-font-sans);
  --m3-type-label-lg: 500 14px/20px var(--m3-font-sans);
  --m3-type-label-md: 500 12px/16px var(--m3-font-sans);
  --m3-type-label-sm: 500 11px/16px var(--m3-font-sans);
  /* Numeric / tabular data — IBM Plex Mono (brand signature) */
  --m3-type-data-lg: 600 22px/28px var(--m3-font-mono);
  --m3-type-data-md: 500 14px/20px var(--m3-font-mono);
  --m3-type-data-sm: 500 12px/16px var(--m3-font-mono);

  /* ---- Tracking (letter-spacing) ----
     A separate family, and it has to be: `--m3-type-*` is a `font:` shorthand, and the
     shorthand RESETS letter-spacing to `normal`. Tracking written in there would be
     silently dropped by every browser (#278). Pinned by TokenParityTest. */
  --m3-track-display-lg: -0.25px;
  --m3-track-display-md: 0px;
  --m3-track-display-sm: 0px;
  --m3-track-headline-lg: 0px;
  --m3-track-headline-md: 0px;
  --m3-track-headline-sm: 0px;
  --m3-track-title-lg: 0px;
  --m3-track-title-md: 0.15px;
  --m3-track-title-sm: 0.1px;
  --m3-track-body-lg: 0.5px;
  --m3-track-body-md: 0.25px;
  --m3-track-body-sm: 0.4px;
  --m3-track-label-lg: 0.1px;
  --m3-track-label-md: 0.1px;
  --m3-track-label-sm: 0.25px;
  --m3-track-data-lg: 0px;
  --m3-track-data-md: 0px;
  --m3-track-data-sm: 0px;

  /* ---- Shape scale ---- */
  --m3-shape-xs: 4px;
  --m3-shape-sm: 8px;
  --m3-shape-md: 12px;
  --m3-shape-lg: 16px;
  --m3-shape-xl: 28px;
  --m3-shape-full: 999px;

  /* ---- Spacing (4px grid) ---- */
  --m3-space-1: 4px;
  --m3-space-2: 8px;
  --m3-space-3: 12px;
  --m3-space-4: 16px;
  --m3-space-5: 20px;
  --m3-space-6: 24px;
  --m3-space-7: 28px;
  --m3-space-8: 32px;
  --m3-space-10: 40px;

  /* ---- State layer opacities ---- */
  --m3-state-hover: 8%;
  --m3-state-pressed: 12%;
  --m3-state-focus: 12%;
  --m3-state-drag: 16%;
  --m3-state-disabled-content: 38%;
  --m3-state-disabled-container: 12%;

  /* ---- Motion ---- */
  --m3-motion-fast: 0.15s cubic-bezier(0.2, 0, 0, 1);
  --m3-motion-medium: 0.3s cubic-bezier(0.2, 0, 0, 1);
  --m3-motion-nav: 0.24s cubic-bezier(0.2, 0, 0, 1);

  /* ---- Layout ---- */
  --m3-nav-rail-width: 248px;
  --m3-nav-rail-collapsed: 72px;
  --m3-top-bar-height: 64px;

  /* ---- Z ---- */
  --m3-z-nav: 40;
  --m3-z-overlay: 100;
  --m3-z-dialog: 110;
  --m3-z-toast: 130;
}

/* ======================================================================
   LIGHT SCHEME — tonal palette seeded from #17589E.
   Canvas (surface) is a dimmed blue-cast tone so lowest/low cards read as
   raised above it; container→highest are the contained fills.
   ====================================================================== */
:root,
[data-theme='light'] {
  /* Primary — brand ink-blue (P40) */
  --m3-primary: #17589e;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #d4e3ff;
  --m3-on-primary-container: #001c3a;
  --m3-inverse-primary: #a6c8ff;

  /* Secondary — slate-blue neutrals */
  --m3-secondary: #545f71;
  --m3-on-secondary: #ffffff;
  --m3-secondary-container: #d8e3f8;
  --m3-on-secondary-container: #111c2b;

  /* Tertiary — violet accent */
  --m3-tertiary: #6f5675;
  --m3-on-tertiary: #ffffff;
  --m3-tertiary-container: #f8d8fd;
  --m3-on-tertiary-container: #28132e;

  /* Error */
  --m3-error: #ba1a1a;
  --m3-on-error: #ffffff;
  --m3-error-container: #ffdad6;
  --m3-on-error-container: #410002;

  /* Surfaces (neutral, faint blue cast). Canvas sits between the white
     card tones and the contained fills so elevation steps read. */
  --m3-surface: #f3f5fa;
  --m3-surface-dim: #d6dae3;
  --m3-surface-bright: #fcfdff;
  --m3-surface-container-lowest: #ffffff;
  --m3-surface-container-low: #fafbfe;
  --m3-surface-container: #eceff6;
  --m3-surface-container-high: #e4e8f0;
  --m3-surface-container-highest: #dce1ea;
  --m3-on-surface: #181c22;
  --m3-on-surface-variant: #414753;
  --m3-outline: #6f7683;
  --m3-outline-variant: #c4c9d3;
  --m3-inverse-surface: #2d3036;
  --m3-inverse-on-surface: #eff0f7;
  --m3-scrim: rgba(9, 12, 18, 0.45);
  --m3-shadow: #10233f;

  /* ---- Semantic status hues (estimating pipeline) ---- */
  --m3-success: #146c2e;
  --m3-on-success: #ffffff;
  --m3-success-container: #abf2bc;
  --m3-on-success-container: #002109;

  --m3-warning: #7a5900;
  --m3-on-warning: #ffffff;
  --m3-warning-container: #ffdf9e;
  --m3-on-warning-container: #261a00;

  --m3-info: #17589e;
  --m3-on-info: #ffffff;
  --m3-info-container: #d4e3ff;
  --m3-on-info-container: #001c3a;

  --m3-violet: #7b4e9c;
  --m3-on-violet: #ffffff;
  --m3-violet-container: #f0dbff;
  --m3-on-violet-container: #2d0a4e;

  /* Slate — a state, not a fault (#133 rostered days off). Neutral grey reads as chrome on a
     month grid, so an off-duty tag needs a tone of its own that is clearly not a warning. */
  --m3-slate: #4a5c70;
  --m3-on-slate: #ffffff;
  --m3-slate-container: #dce4ee;
  --m3-on-slate-container: #1a2733;

  /* Job status → tone mapping (draft/review/approved/quote-ready/issued/won/lost) */
  --m3-status-draft-bg: var(--m3-secondary-container);
  --m3-status-draft-fg: var(--m3-on-secondary-container);
  --m3-status-review-bg: var(--m3-warning-container);
  --m3-status-review-fg: var(--m3-on-warning-container);
  --m3-status-approved-bg: var(--m3-info-container);
  --m3-status-approved-fg: var(--m3-on-info-container);
  --m3-status-quote-ready-bg: var(--m3-violet-container);
  --m3-status-quote-ready-fg: var(--m3-on-violet-container);
  --m3-status-issued-bg: var(--m3-primary-container);
  --m3-status-issued-fg: var(--m3-on-primary-container);
  --m3-status-won-bg: var(--m3-success-container);
  --m3-status-won-fg: var(--m3-on-success-container);
  --m3-status-lost-bg: var(--m3-error-container);
  --m3-status-lost-fg: var(--m3-on-error-container);

  /* ---- Elevation (M3 levels 0–3) — soft, brand-ink tinted in light ---- */
  --m3-elev-0: none;
  --m3-elev-1: 0 1px 2px rgba(16, 35, 63, 0.1), 0 1px 3px 1px rgba(16, 35, 63, 0.06);
  --m3-elev-2: 0 1px 2px rgba(16, 35, 63, 0.11), 0 2px 6px 2px rgba(16, 35, 63, 0.08);
  --m3-elev-3: 0 2px 4px rgba(16, 35, 63, 0.12), 0 4px 10px 3px rgba(16, 35, 63, 0.1);

  /* Nav rail keeps the deep-brand look in both schemes */
  --m3-nav-surface: #0d2440;
  --m3-nav-on-surface: #cfdcf0;
  --m3-nav-on-surface-strong: #ffffff;
  --m3-nav-active-bg: rgba(166, 200, 255, 0.18);
  --m3-nav-active-fg: #d4e3ff;
  /* The rail's own accent: what marks the row you are on, and the one bright thing on a dark
     surface. It does NOT flip with the page's scheme, because the rail is dark in both — the
     page's --m3-primary is a deep blue meant for a light background and disappears here. */
  --m3-nav-accent: #4c8dff;
  --m3-nav-border: transparent;

  color-scheme: light;
}

/* ======================================================================
   DARK SCHEME — blue-biased near-black ladder (surface ≈ N6 of the blue
   neutral palette); elevation is expressed by climbing the container
   ladder, shadows are kept near-invisible. Accents/status at tone ~80,
   desaturated so nothing glows neon on the dark ground.
   ====================================================================== */
[data-theme='dark'] {
  --m3-primary: #a6c8ff;
  --m3-on-primary: #00315f;
  --m3-primary-container: #004786;
  --m3-on-primary-container: #d4e3ff;
  --m3-inverse-primary: #17589e;

  --m3-secondary: #bcc7db;
  --m3-on-secondary: #263141;
  --m3-secondary-container: #3d4758;
  --m3-on-secondary-container: #d8e3f8;

  --m3-tertiary: #d5bcda;
  --m3-on-tertiary: #3f2844;
  --m3-tertiary-container: #543e5a;
  --m3-on-tertiary-container: #f4d9f8;

  --m3-error: #ffb4ab;
  --m3-on-error: #690005;
  --m3-error-container: #8c1d18;
  --m3-on-error-container: #ffdad6;

  --m3-surface: #10141b;
  --m3-surface-dim: #0b0e14;
  --m3-surface-bright: #3b414d;
  --m3-surface-container-lowest: #0a0d12;
  --m3-surface-container-low: #171b23;
  --m3-surface-container: #1c212b;
  --m3-surface-container-high: #262c37;
  --m3-surface-container-highest: #313846;
  --m3-on-surface: #e3e6ed;
  --m3-on-surface-variant: #c3c8d4;
  --m3-outline: #8b91a0;
  --m3-outline-variant: #3b414e;
  --m3-inverse-surface: #e3e6ed;
  --m3-inverse-on-surface: #2e3239;
  --m3-scrim: rgba(0, 0, 0, 0.6);
  --m3-shadow: #000000;

  --m3-success: #8bd39c;
  --m3-on-success: #00391a;
  --m3-success-container: #1d5433;
  --m3-on-success-container: #a9f0ba;

  --m3-warning: #e3c06d;
  --m3-on-warning: #3f2e00;
  --m3-warning-container: #5a4718;
  --m3-on-warning-container: #f6dfad;

  --m3-info: #a6c8ff;
  --m3-on-info: #00315f;
  --m3-info-container: #004786;
  --m3-on-info-container: #d4e3ff;

  --m3-violet: #cfb1e8;
  --m3-on-violet: #3a2354;
  --m3-violet-container: #523a70;
  --m3-on-violet-container: #ecdcff;

  --m3-slate: #a9bcd0;
  --m3-on-slate: #22303f;
  --m3-slate-container: #39485a;
  --m3-on-slate-container: #d3dfec;

  /* Status map must be re-declared per scheme: var() inside a custom property
     resolves on the declaring element, so a :root-only map would freeze the
     light container colors into dark frames. */
  --m3-status-draft-bg: var(--m3-secondary-container);
  --m3-status-draft-fg: var(--m3-on-secondary-container);
  --m3-status-review-bg: var(--m3-warning-container);
  --m3-status-review-fg: var(--m3-on-warning-container);
  --m3-status-approved-bg: var(--m3-info-container);
  --m3-status-approved-fg: var(--m3-on-info-container);
  --m3-status-quote-ready-bg: var(--m3-violet-container);
  --m3-status-quote-ready-fg: var(--m3-on-violet-container);
  --m3-status-issued-bg: var(--m3-primary-container);
  --m3-status-issued-fg: var(--m3-on-primary-container);
  --m3-status-won-bg: var(--m3-success-container);
  --m3-status-won-fg: var(--m3-on-success-container);
  --m3-status-lost-bg: var(--m3-error-container);
  --m3-status-lost-fg: var(--m3-on-error-container);

  /* Shadows near-invisible in dark — tone carries elevation */
  --m3-elev-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --m3-elev-2: 0 1px 3px rgba(0, 0, 0, 0.4);
  --m3-elev-3: 0 2px 6px rgba(0, 0, 0, 0.45);

  /* Rail differentiates from the canvas: deeper blue cast + hairline */
  --m3-nav-surface: #121a28;
  --m3-nav-on-surface: #c6cddc;
  --m3-nav-on-surface-strong: #f2f5fb;
  --m3-nav-active-bg: rgba(166, 200, 255, 0.14);
  --m3-nav-active-fg: #d4e3ff;
  --m3-nav-accent: #4c8dff;
  --m3-nav-border: rgba(255, 255, 255, 0.08);

  color-scheme: dark;
}

/* System fallback when the page never sets data-theme.
   MUST stay byte-identical to the [data-theme='dark'] block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='dark']) {
    --m3-primary: #a6c8ff;
    --m3-on-primary: #00315f;
    --m3-primary-container: #004786;
    --m3-on-primary-container: #d4e3ff;
    --m3-inverse-primary: #17589e;

    --m3-secondary: #bcc7db;
    --m3-on-secondary: #263141;
    --m3-secondary-container: #3d4758;
    --m3-on-secondary-container: #d8e3f8;

    --m3-tertiary: #d5bcda;
    --m3-on-tertiary: #3f2844;
    --m3-tertiary-container: #543e5a;
    --m3-on-tertiary-container: #f4d9f8;

    --m3-error: #ffb4ab;
    --m3-on-error: #690005;
    --m3-error-container: #8c1d18;
    --m3-on-error-container: #ffdad6;

    --m3-surface: #10141b;
    --m3-surface-dim: #0b0e14;
    --m3-surface-bright: #3b414d;
    --m3-surface-container-lowest: #0a0d12;
    --m3-surface-container-low: #171b23;
    --m3-surface-container: #1c212b;
    --m3-surface-container-high: #262c37;
    --m3-surface-container-highest: #313846;
    --m3-on-surface: #e3e6ed;
    --m3-on-surface-variant: #c3c8d4;
    --m3-outline: #8b91a0;
    --m3-outline-variant: #3b414e;
    --m3-inverse-surface: #e3e6ed;
    --m3-inverse-on-surface: #2e3239;
    --m3-scrim: rgba(0, 0, 0, 0.6);
    --m3-shadow: #000000;

    --m3-success: #8bd39c;
    --m3-on-success: #00391a;
    --m3-success-container: #1d5433;
    --m3-on-success-container: #a9f0ba;

    --m3-warning: #e3c06d;
    --m3-on-warning: #3f2e00;
    --m3-warning-container: #5a4718;
    --m3-on-warning-container: #f6dfad;

    --m3-info: #a6c8ff;
    --m3-on-info: #00315f;
    --m3-info-container: #004786;
    --m3-on-info-container: #d4e3ff;

    --m3-violet: #cfb1e8;
    --m3-on-violet: #3a2354;
    --m3-violet-container: #523a70;
    --m3-on-violet-container: #ecdcff;

    --m3-slate: #a9bcd0;
    --m3-on-slate: #22303f;
    --m3-slate-container: #39485a;
    --m3-on-slate-container: #d3dfec;

    /* Status map must be re-declared per scheme: var() inside a custom property
       resolves on the declaring element, so a :root-only map would freeze the
       light container colors into dark frames. */
    --m3-status-draft-bg: var(--m3-secondary-container);
    --m3-status-draft-fg: var(--m3-on-secondary-container);
    --m3-status-review-bg: var(--m3-warning-container);
    --m3-status-review-fg: var(--m3-on-warning-container);
    --m3-status-approved-bg: var(--m3-info-container);
    --m3-status-approved-fg: var(--m3-on-info-container);
    --m3-status-quote-ready-bg: var(--m3-violet-container);
    --m3-status-quote-ready-fg: var(--m3-on-violet-container);
    --m3-status-issued-bg: var(--m3-primary-container);
    --m3-status-issued-fg: var(--m3-on-primary-container);
    --m3-status-won-bg: var(--m3-success-container);
    --m3-status-won-fg: var(--m3-on-success-container);
    --m3-status-lost-bg: var(--m3-error-container);
    --m3-status-lost-fg: var(--m3-on-error-container);

    --m3-elev-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --m3-elev-2: 0 1px 3px rgba(0, 0, 0, 0.4);
    --m3-elev-3: 0 2px 6px rgba(0, 0, 0, 0.45);

    --m3-nav-surface: #121a28;
    --m3-nav-on-surface: #c6cddc;
    --m3-nav-on-surface-strong: #f2f5fb;
    --m3-nav-active-bg: rgba(166, 200, 255, 0.14);
    --m3-nav-active-fg: #d4e3ff;
    --m3-nav-accent: #4c8dff;
    --m3-nav-border: rgba(255, 255, 255, 0.08);

    color-scheme: dark;
  }
}