/* ══════════════════════════════════════════════════════════════════════════
   Sidecue design tokens — Material Design 3
   Shared by the Chrome extension (styles/tokens.css) and the web dashboard
   (web/css/tokens.css). Keep both copies identical.

   Color roles are generated with @material/material-color-utilities
   (SchemeFidelity) from the logo blue #3662E2, so primary-container is the
   exact brand color. Success / warning are custom colors harmonized to it.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── Brand ─────────────────────────────────────────────── */
  --sc-brand: #3662e2;
  --sc-on-brand: #ffffff;

  /* ── Color roles (light) ───────────────────────────────── */
  --md-sys-color-primary: #0d47c9;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #3662e2;
  --md-sys-color-on-primary-container: #eceeff;
  --md-sys-color-inverse-primary: #b6c4ff;
  --md-sys-color-secondary: #4e5c8f;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #b6c4fe;
  --md-sys-color-on-secondary-container: #425082;
  --md-sys-color-tertiary: #8e3a00;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #b54c00;
  --md-sys-color-on-tertiary-container: #ffebe2;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #93000a;
  --md-sys-color-surface: #faf8ff;
  --md-sys-color-on-surface: #1a1b23;
  --md-sys-color-surface-variant: #e0e1f3;
  --md-sys-color-on-surface-variant: #434654;
  --md-sys-color-surface-dim: #d9d9e4;
  --md-sys-color-surface-bright: #faf8ff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f3f2fe;
  --md-sys-color-surface-container: #ededf8;
  --md-sys-color-surface-container-high: #e8e7f2;
  --md-sys-color-surface-container-highest: #e2e1ec;
  --md-sys-color-inverse-surface: #2e3038;
  --md-sys-color-inverse-on-surface: #f0f0fb;
  --md-sys-color-outline: #747686;
  --md-sys-color-outline-variant: #c4c5d7;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: #2253d3;
  --md-sys-color-success: #006c49;
  --md-sys-color-on-success: #ffffff;
  --md-sys-color-success-container: #8af8c2;
  --md-sys-color-on-success-container: #002113;
  --md-sys-color-warning: #8c5000;
  --md-sys-color-on-warning: #ffffff;
  --md-sys-color-warning-container: #ffdcbf;
  --md-sys-color-on-warning-container: #2d1600;

  /* ── Typeface ──────────────────────────────────────────── */
  --md-ref-typeface-brand: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --md-ref-typeface-plain: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --md-ref-typeface-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  /* ── Type scale (MD3 roles: size / line-height / weight / tracking) ── */
  --md-sys-typescale-display-small: 600 36px/44px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large: 600 32px/40px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium: 600 28px/36px var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small: 600 24px/32px var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large: 600 22px/28px var(--md-ref-typeface-brand);
  --md-sys-typescale-title-medium: 600 16px/24px var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small: 600 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large: 400 16px/24px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium: 400 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small: 400 12px/16px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large: 500 14px/20px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium: 500 12px/16px var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small: 500 11px/16px var(--md-ref-typeface-plain);

  /* ── Shape ─────────────────────────────────────────────── */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* ── Elevation (MD3 shadow levels) ─────────────────────── */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-level2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --md-sys-elevation-level3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);
  --md-sys-elevation-level4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.30);
  --md-sys-elevation-level5: 0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px rgba(0,0,0,.30);

  /* ── State layers ──────────────────────────────────────── */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.10;
  --md-sys-state-pressed-opacity: 0.10;
  --md-sys-state-dragged-opacity: 0.16;
  --md-sys-state-disabled-container-opacity: 0.12;
  --md-sys-state-disabled-content-opacity: 0.38;

  /* ── Motion ────────────────────────────────────────────── */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium4: 400ms;

  /* ── Spacing (4dp grid) ────────────────────────────────── */
  --sc-space-1: 4px;
  --sc-space-2: 8px;
  --sc-space-3: 12px;
  --sc-space-4: 16px;
  --sc-space-5: 20px;
  --sc-space-6: 24px;
  --sc-space-8: 32px;
  --sc-space-10: 40px;
  --sc-space-12: 48px;
}

/* ── Color roles (dark) ─────────────────────────────────────
   Web dashboard: <html class="dark">. Extension: <body class="theme-dark">. */
html.dark,
body.theme-dark {
  color-scheme: dark;
  --md-sys-color-primary: #b6c4ff;
  --md-sys-color-on-primary: #00287e;
  --md-sys-color-primary-container: #3662e2;
  --md-sys-color-on-primary-container: #eceeff;
  --md-sys-color-inverse-primary: #2253d3;
  --md-sys-color-secondary: #b6c4fe;
  --md-sys-color-on-secondary: #1e2d5e;
  --md-sys-color-secondary-container: #364476;
  --md-sys-color-on-secondary-container: #a5b3ec;
  --md-sys-color-tertiary: #ffb692;
  --md-sys-color-on-tertiary: #552000;
  --md-sys-color-tertiary-container: #b54c00;
  --md-sys-color-on-tertiary-container: #ffebe2;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
  --md-sys-color-surface: #11131b;
  --md-sys-color-on-surface: #e2e1ec;
  --md-sys-color-surface-variant: #434654;
  --md-sys-color-on-surface-variant: #c4c5d7;
  --md-sys-color-surface-dim: #11131b;
  --md-sys-color-surface-bright: #373941;
  --md-sys-color-surface-container-lowest: #0c0e15;
  --md-sys-color-surface-container-low: #1a1b23;
  --md-sys-color-surface-container: #1e1f27;
  --md-sys-color-surface-container-high: #282a32;
  --md-sys-color-surface-container-highest: #33343d;
  --md-sys-color-inverse-surface: #e2e1ec;
  --md-sys-color-inverse-on-surface: #2e3038;
  --md-sys-color-outline: #8d90a0;
  --md-sys-color-outline-variant: #434654;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: #b6c4ff;
  --md-sys-color-success: #6ddba7;
  --md-sys-color-on-success: #003824;
  --md-sys-color-success-container: #005236;
  --md-sys-color-on-success-container: #8af8c2;
  --md-sys-color-warning: #ffb873;
  --md-sys-color-on-warning: #4b2800;
  --md-sys-color-warning-container: #6a3b00;
  --md-sys-color-on-warning-container: #ffdcbf;
}