/* ================================================================
   Dispovia — dark design tokens
   -----------------------------------------------------------------
   Layer 1: primitives (raw values; only this block may hold hex)
   Layer 2: semantic tokens (identical names to taskpane.css)
   Layer 3: site layout + motion tokens (prefixed --site-*)
   Rule: components consume semantic tokens only.
   ================================================================ */

/* ---------- 1. Primitives ---------- */

:root {
  color-scheme: dark;

  /* Brand blue family (machine) */
  --pal-blue-900: #0e2f4a;
  --pal-blue-800: #17456d;
  --pal-blue-700: #1f4e79;
  --pal-blue-600: #2f6ca0;
  --pal-blue-500: #3e8ac9;
  --pal-blue-400: #62a9dc;
  --pal-blue-200: #b7d5eb;
  --pal-blue-100: #dcebf6;

  /* Brand accent (human) — fixed, never tinted */
  --pal-yellow-400: #ffc40c;

  /* Neutral workbench */
  --pal-ink-950: #0b0f14;
  --pal-ink-900: #0f151d;
  --pal-ink-850: #141b24;
  --pal-ink-800: #1a232e;
  --pal-ink-700: #1b2531;
  --pal-ink-600: #263240;
  --pal-ink-500: #33414f;
  --pal-ink-400: #536477;
  --pal-ink-300: #8291a1;
  --pal-ink-200: #a7b4c2;
  --pal-ink-100: #c8d2dc;
  --pal-ink-50: #e9edf2;

  /* Status (always with icon + text) */
  --pal-green-500: #3da968;
  --pal-green-950: #0f2a1d;
  --pal-amber-500: #e0a320;
  --pal-amber-950: #2a2110;
  --pal-red-500: #e5695b;
  --pal-red-950: #2b1412;

  /* Type */
  --font-sans: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui,
    -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", "Cascadia Mono", "Consolas", "SFMono-Regular",
    ui-monospace, monospace;

  /* The add-in's dense UI scale. The hero mock uses these unchanged. */
  --type-2xs: 9.5px;
  --type-xs: 10px;
  --type-sm: 10.5px;
  --type-md: 11px;
  --type-lg: 11.5px;
  --type-xl: 12px;
  --type-2xl: 12.5px;
  --type-3xl: 13px;
  --type-4xl: 13.5px;
  --type-5xl: 14px;
  --type-6xl: 15px;

  /* Geometry. Hard ceiling: 4 px. */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 4px;

  /* 4 px grid */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-2xl: 24px;

  /* Component geometry inherited from taskpane.css */
  --header-height: 48px;
  --control-height-lg: 38px;
  --control-height-md: 34px;
  --control-height-dock: 36px;
  --control-height-sm: 30px;
  --chip-height: 20px;
  --dock-action-min: 128px;
}

/* ---------- 2. Semantic tokens ---------- */

:root {
  /* Surfaces: layered elevation by fill + 1 px border. No shadows. */
  --surface-page: var(--pal-ink-950);
  --surface-default: var(--pal-ink-850);
  --surface-subtle: var(--pal-ink-800);
  --surface-muted: var(--pal-ink-900);
  --surface-shader-fallback: #101720;
  --surface-selected: #12283a;
  --surface-overlay: #101821;
  --surface-glass: rgba(11, 15, 20, 0.82);
  --surface-glass-strong: rgba(11, 15, 20, 0.94);

  /* Text */
  --text-primary: var(--pal-ink-50);
  --text-secondary: var(--pal-ink-200);
  --text-muted: var(--pal-ink-300);
  --text-on-accent: var(--pal-ink-950);

  /* Borders */
  --border-default: var(--pal-ink-600);
  --border-soft: var(--pal-ink-700);
  --border-strong: var(--pal-ink-500);
  --border-control: #5e7185;

  /* Blue = machine */
  --accent: var(--pal-blue-500);
  --accent-strong: var(--pal-blue-600);
  --accent-active: var(--pal-blue-700);
  --accent-soft: #12283a;
  --accent-line: #2b4e6b;

  /* Orange = the human decision. Never decorative. */
  --brand-accent: var(--pal-yellow-400);
  --brand-accent-ink: var(--pal-ink-950);
  --brand-accent-hover: #ffd24a;
  /* Orange as text. #FFC40C is 1.48:1 on a light surface, so light mode uses
     the same hue, darkened. Fills always stay the exact brand value. */
  --brand-accent-text: var(--pal-yellow-400);

  /* Status */
  --status-ok: var(--pal-green-500);
  --status-ok-soft: var(--pal-green-950);
  --status-warn: var(--pal-amber-500);
  --status-warn-soft: var(--pal-amber-950);
  --status-warn-line: #5c4a17;
  --status-error: var(--pal-red-500);
  --status-error-soft: var(--pal-red-950);
  --status-neutral-soft: var(--pal-ink-800);

  /* Third-party brand marks. Fixed brand values: never theme, filter, or fade
     them. The white plate keeps the marks legible on the dark page; the name
     and role labels stay neutral text so contrast is unchanged. */
  --brand-timocom: #0069b4;
  --logo-plate: #ffffff;
  --logo-plate-edge: rgba(255, 255, 255, 0.18);

  --focus-ring: var(--accent);
  --font: var(--font-sans);
  --mono: var(--font-mono);

  /* Dark mode does not use the light theme's two elevations. */
  --shadow-card: none;
  --shadow-dock: none;
}

/* ---------- 2b. Light theme ----------
   Same semantic names, light values. Activated by data-theme="light" on the
   html element. The contrast bar is identical: every text pair >= 4.5:1. */

:root[data-theme="light"] {
  color-scheme: light;

  --surface-page: #f5f6f7;
  --surface-default: #ffffff;
  --surface-subtle: #eef1f4;
  --surface-muted: #e4e9ee;
  --surface-shader-fallback: #f0f3f6;
  --surface-selected: #eaf2fa;
  --surface-overlay: #ffffff;
  --surface-glass: rgba(245, 246, 247, 0.82);
  --surface-glass-strong: rgba(245, 246, 247, 0.94);

  --text-primary: #0b0f14;
  --text-secondary: #34414f;
  /* #5B6B7B from the proposal is 4.48:1 on --surface-muted. Darkened one step
     so the mock's muted labels clear 4.5:1 on every light surface. */
  --text-muted: #586776;
  --text-on-accent: #ffffff;

  --border-default: #d8dee6;
  --border-soft: #e4e9ee;
  --border-strong: #b7c2ce;
  --border-control: #7c8a98;

  --accent: #1f4e79;
  --accent-strong: #14426e;
  --accent-active: #102f4a;
  --accent-soft: #e9f1f8;
  --accent-line: #bcd3e8;

  --brand-accent: #ffc40c;
  --brand-accent-ink: #0b0f14;
  --brand-accent-hover: #ffd24a;
  --brand-accent-text: #7a5a00;

  --status-ok: #1c6b39;
  --status-ok-soft: #e7f4ec;
  --status-warn: #8a5a00;
  --status-warn-soft: #fff4d6;
  --status-warn-line: #e0bf63;
  --status-error: #9b2222;
  --status-error-soft: #fbe9e9;
  --status-neutral-soft: #eef1f5;

  --logo-plate: #ffffff;
  --logo-plate-edge: rgba(11, 15, 20, 0.1);

  --focus-ring: var(--accent);

  /* Light elevation is a fill step plus a border. Still no shadow. */
  --shadow-card: none;
  --shadow-dock: none;

  /* Light glass band. Fill raised so muted text keeps 4.5:1 on the lightest
     shader frame. White glints read as gloss on the pale surface. */
  --site-glass-fill: rgba(245, 246, 247, 0.76);
  --site-glass-edge: rgba(255, 255, 255, 0.95);
  --site-glass-edge-bottom: rgba(11, 15, 20, 0.08);
  --site-glass-rim: rgba(255, 255, 255, 0.9);
  --site-glass-wash: rgba(255, 255, 255, 0.55);
  --site-glass-glint: rgba(255, 255, 255, 0.8);
  --site-glass-reflection: rgba(255, 255, 255, 0.62);
  --site-scrim: rgba(11, 15, 20, 0.38);
}

/* ---------- 3. Site tokens ---------- */

:root {
  --site-header-height: 68px;
  --site-container: 1200px;
  --site-gutter: clamp(20px, 4vw, 40px);
  --site-section: clamp(76px, 9vw, 128px);
  --site-measure: 64ch;
  --site-rule: 1px solid var(--border-soft);

  --site-display: clamp(2.35rem, 1.18rem + 4.1vw, 4.25rem);
  --site-h2: clamp(1.9rem, 1.2rem + 2.5vw, 3rem);
  --site-h3: clamp(1.05rem, 0.98rem + 0.28vw, 1.2rem);
  --site-lead: clamp(1.0625rem, 1rem + 0.34vw, 1.25rem);
  --site-body: 1.0625rem;
  --site-small: 0.875rem;
  --site-micro: 0.75rem;

  --site-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --site-dur-micro: 160ms;
  --site-dur-standard: 280ms;
  --site-dur-slow: 480ms;
  --site-stagger: 52ms;

  --site-z-ambient: 0;
  --site-z-content: 1;
  --site-z-header: 40;
  --site-z-menu: 30;
  --site-z-skip: 50;
  --site-z-consent: 60;

  --site-scrim: rgba(5, 8, 11, 0.72);

  /* Problem band. Frosted glass over the ambient surface: the fill is opaque
     enough that --text-muted holds 4.5:1 even under a veil peak. */
  --site-glass-fill: rgba(11, 15, 20, 0.58);
  --site-glass-blur: 18px;
  --site-glass-edge: rgba(255, 255, 255, 0.2);
  --site-glass-edge-bottom: rgba(0, 0, 0, 0.32);
  --site-glass-rim: rgba(255, 255, 255, 0.06);
  --site-glass-wash: rgba(255, 255, 255, 0.05);
  --site-glass-glint: rgba(255, 255, 255, 0.1);
  --site-glass-reflection: rgba(255, 255, 255, 0.14);
}

/* ---------- 4. Accessibility overrides ---------- */

@media (prefers-contrast: more) {
  :root {
    --text-muted: #a7b4c2;
    --text-secondary: #d7dee6;
    --border-default: #4c5d70;
    --border-soft: #3d4c5c;
    --border-strong: #6c7f92;
    --accent: #74b5e4;
    --accent-line: #4f7fa5;
    --status-ok: #68c88c;
    --status-warn: #f0bd4a;
    --status-error: #f08a7e;
    --status-warn-line: #8a6a1e;
  }

  :root[data-theme="light"] {
    --text-muted: #34414f;
    --text-secondary: #1c2733;
    --border-default: #9aa8b6;
    --border-soft: #b7c2ce;
    --border-strong: #6c7f92;
    --accent: #123a5c;
    --accent-line: #6f9cc2;
    --status-ok: #14512c;
    --status-warn: #6b4600;
    --status-error: #7d1a1a;
    --status-warn-line: #b8912f;
  }
}

@media (forced-colors: active) {
  :root {
    --surface-page: Canvas;
    --surface-default: Canvas;
    --surface-subtle: Canvas;
    --surface-muted: Canvas;
    --surface-shader-fallback: Canvas;
    --surface-selected: Highlight;
    --surface-overlay: Canvas;
    --text-primary: CanvasText;
    --text-secondary: CanvasText;
    --text-muted: CanvasText;
    --text-on-accent: ButtonText;
    --border-default: CanvasText;
    --border-soft: CanvasText;
    --border-strong: CanvasText;
    --border-control: CanvasText;
    --accent: Highlight;
    --accent-strong: Highlight;
    --accent-active: Highlight;
    --accent-soft: Canvas;
    --accent-line: CanvasText;
    --brand-accent: ButtonFace;
    --brand-accent-ink: ButtonText;
    --brand-accent-hover: ButtonFace;
    --brand-accent-text: CanvasText;
    --surface-glass: Canvas;
    --surface-glass-strong: Canvas;
    --status-ok: CanvasText;
    --status-warn: CanvasText;
    --status-error: CanvasText;
    --status-ok-soft: Canvas;
    --status-warn-soft: Canvas;
    --status-error-soft: Canvas;
    --status-warn-line: CanvasText;
    --focus-ring: Highlight;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --site-dur-micro: 1ms;
    --site-dur-standard: 1ms;
    --site-dur-slow: 1ms;
    --site-stagger: 0ms;
  }
}