/* ==========================================================================
 * CANARY DESIGN SYSTEM — UNIFIED MODERN MATERIAL DESIGN 3 / INSTRUMENT THEME
 * Applied across both Dashboard (internal/ui) and Public Site (cmd/site)
 * ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  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: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  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;

  /* Material 3 Tonal Surfaces - Light Scheme (Amber Seed) */
  --bg: #FDF8F5;
  --surface-low: #FFFFFF;
  --surface: #F7EFEA;
  --surface-high: #F1E9E3;
  --surface-highest: #EBE3DD;
  --surface-bright: #E2DAD3;

  --ink: #1F1B16;
  --ink-muted: #574F46;
  --rule: #E5DAD0;
  --rule-strong: #96897E;

  /* Brand / Primary */
  --canary: #875200;
  --on-canary: #FFFFFF;
  --canary-text: #875200;
  --perch: #1F1B16;

  --primary: #875200;
  --on-primary: #FFFFFF;
  --primary-container: #FFDDBB;
  --on-primary-container: #2C1600;

  --secondary: #715A42;
  --on-secondary: #FFFFFF;
  --secondary-container: #FCDDBE;
  --on-secondary-container: #281806;

  /* 6 Canonical States */
  --state-verified: #067A57;
  --state-resolved: #0B6E86;
  --state-unresolvable: #9A5B00;
  --state-unverified: #5A6472;
  --state-disputed: #B4500A;
  --state-compromised: #B3243E;

  /* Typography */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.6875rem;
  --text-s: 0.75rem;
  --text-m: 0.875rem;
  --text-l: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.625rem;
  --text-3xl: 2.125rem;
  --text-4xl: 2.75rem;

  --leading: 1.5;
  --leading-tight: 1.15;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* M3 Elevation & Shape */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --radius-2xl: 28px;
  --radius-full: 9999px;
  --rule-width: 1px;

  --shadow-sm: 0 1px 2px rgba(31, 27, 22, 0.05);
  --shadow-md: 0 4px 8px -1px rgba(31, 27, 22, 0.08), 0 2px 4px -2px rgba(31, 27, 22, 0.05);
  --shadow-lg: 0 10px 20px -3px rgba(31, 27, 22, 0.08), 0 4px 6px -4px rgba(31, 27, 22, 0.04);
  --shadow-chrome: 0 1px 4px rgba(31, 27, 22, 0.08);

  --page-max: 96rem;
  --gutter: 24px;
  --measure: 68ch;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Material 3 Tonal Surfaces - Dark Scheme */
    --bg: #11100F;
    --surface-low: #0B0A09;
    --surface: #181715;
    --surface-high: #1E1D1B;
    --surface-highest: #282624;
    --surface-bright: #33302D;

    --ink: #EDE7E1;
    --ink-muted: #D3C7BC;
    --rule: #2E2A26;
    --rule-strong: #524B44;

    /* Brand / Primary */
    --canary: #FFB868;
    --on-canary: #46290B;
    --canary-text: #FFB868;
    --perch: #FFB868;

    --primary: #FFB868;
    --on-primary: #46290B;
    --primary-container: #654019;
    --on-primary-container: #FFDDB8;

    --secondary: #E4C08F;
    --on-secondary: #422C0A;
    --secondary-container: #5B441C;
    --on-secondary-container: #FFDFAE;

    /* 6 Canonical States */
    --state-verified: #09B788;
    --state-resolved: #06B6D4;
    --state-unresolvable: #F59E0B;
    --state-unverified: #94A3B8;
    --state-disputed: #F97316;
    --state-compromised: #F43F5E;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6);
    --shadow-chrome: 0 1px 4px rgba(0, 0, 0, 0.5);
  }
}

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

  --bg: #11100F;
  --surface-low: #0B0A09;
  --surface: #181715;
  --surface-high: #1E1D1B;
  --surface-highest: #282624;
  --surface-bright: #33302D;

  --ink: #EDE7E1;
  --ink-muted: #D3C7BC;
  --rule: #2E2A26;
  --rule-strong: #524B44;

  --canary: #FFB868;
  --on-canary: #46290B;
  --canary-text: #FFB868;
  --perch: #FFB868;

  --primary: #FFB868;
  --on-primary: #46290B;
  --primary-container: #654019;
  --on-primary-container: #FFDDB8;

  --secondary: #E4C08F;
  --on-secondary: #422C0A;
  --secondary-container: #5B441C;
  --on-secondary-container: #FFDFAE;

  --state-verified: #09B788;
  --state-resolved: #06B6D4;
  --state-unresolvable: #F59E0B;
  --state-unverified: #94A3B8;
  --state-disputed: #F97316;
  --state-compromised: #F43F5E;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6);
  --shadow-chrome: 0 1px 4px rgba(0, 0, 0, 0.5);
}