@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../../assets/fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Archivo Variable";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("../../assets/fonts/archivo-latin-wght-italic.woff2") format("woff2-variations");
}

@layer tokens {
  :root {
    color-scheme: light;
    --font-ui: "Archivo Variable", "Archivo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --canvas: #f3f6fa;
    --canvas-muted: #e9eef5;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-strong: #0d1a2f;
    --text: #111927;
    --text-soft: #3f4b5d;
    --text-muted: #657286;
    --text-on-strong: #f7f9fc;
    --line: #d5dde8;
    --line-strong: #aeb9c8;
    --action: #1b57cf;
    --action-hover: #1246ad;
    --action-soft: #e7efff;
    --danger: #cc3042;
    --danger-soft: #fdecef;
    --warning: #a46400;
    --warning-soft: #fff4d6;
    --success: #147655;
    --success-soft: #e4f4ed;
    --chart-1: #1b57cf;
    --chart-2: #da3b4b;
    --chart-3: #d89b00;
    --chart-4: #13876b;
    --chart-5: #7757c8;
    --focus: #ffca28;
    --shadow-soft: 0 16px 48px rgb(27 45 78 / 0.1);
    --shadow-float: 0 24px 70px rgb(11 25 48 / 0.18);
    --radius-control: 0.5rem;
    --radius-panel: 0.75rem;
    --radius-media: 1rem;
    --header-height: 4.5rem;
    --content-max: 90rem;
    --reading-max: 68ch;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
    --duration-fast: 140ms;
    --duration-normal: 240ms;
    --z-header: 30;
    --z-overlay: 40;
    --z-drawer: 50;
    --z-modal: 70;
  }

  html[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #0a111b;
    --canvas-muted: #0f1927;
    --surface: #111c2a;
    --surface-raised: #172334;
    --surface-strong: #07101f;
    --text: #f2f5f9;
    --text-soft: #c5cfdd;
    --text-muted: #93a0b3;
    --text-on-strong: #f7f9fc;
    --line: #2b394c;
    --line-strong: #45566d;
    --action: #70a0ff;
    --action-hover: #98baff;
    --action-soft: #172d57;
    --danger: #ff7180;
    --danger-soft: #3b1d28;
    --warning: #ffc84a;
    --warning-soft: #342a12;
    --success: #5ad2a7;
    --success-soft: #12352c;
    --chart-1: #70a0ff;
    --chart-2: #ff7180;
    --chart-3: #ffc84a;
    --chart-4: #5ad2a7;
    --chart-5: #b39aff;
    --shadow-soft: 0 18px 52px rgb(0 0 0 / 0.24);
    --shadow-float: 0 28px 80px rgb(0 0 0 / 0.42);
  }
}