/* Horizon Ethos design tokens — generated by hand from docs/design/horizon_ethos/DESIGN.md */
:root {
  /* Colors (DESIGN.md lines 3–50) */
  --color-surface: #f7fafc;
  --color-surface-dim: #d7dadc;
  --color-surface-bright: #f7fafc;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f1f4f6;
  --color-surface-container: #ebeef0;
  --color-surface-container-high: #e5e9eb;
  --color-surface-container-highest: #e0e3e5;
  --color-on-surface: #181c1e;
  --color-on-surface-variant: #43474e;
  --color-inverse-surface: #2d3133;
  --color-inverse-on-surface: #eef1f3;
  --color-outline: #74777f;
  --color-outline-variant: #c4c6cf;
  --color-surface-tint: #455f88;
  --color-primary: #002045;
  --color-on-primary: #ffffff;
  --color-primary-container: #1a365d;
  --color-on-primary-container: #86a0cd;
  --color-inverse-primary: #adc7f7;
  --color-secondary: #875200;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #ffb55c;
  --color-on-secondary-container: #744600;
  --color-tertiary: #00261f;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #003e33;
  --color-on-tertiary-container: #6dab9a;
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-primary-fixed: #d6e3ff;
  --color-primary-fixed-dim: #adc7f7;
  --color-on-primary-fixed: #001b3c;
  --color-on-primary-fixed-variant: #2d476f;
  --color-secondary-fixed: #ffddba;
  --color-secondary-fixed-dim: #ffb866;
  --color-on-secondary-fixed: #2b1700;
  --color-on-secondary-fixed-variant: #673d00;
  --color-tertiary-fixed: #afefdd;
  --color-tertiary-fixed-dim: #94d3c1;
  --color-on-tertiary-fixed: #00201a;
  --color-on-tertiary-fixed-variant: #065043;
  --color-background: #f7fafc;
  --color-on-background: #181c1e;
  --color-surface-variant: #e0e3e5;

  /* Radii (DESIGN.md lines 97–103; prose: 12px standard for buttons/cards/inputs) */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;   /* 12px — standard buttons, cards, search bars */
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Spacing (8px linear scale; DESIGN.md lines 104–109) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-container-mobile: 16px;
  --space-container-desktop: 32px;
  --space-gutter: 16px;
  --space-card-gap: 20px;

  /* Layout */
  --content-max: 1280px;
  --appbar-h: 64px;

  /* Font stack: Inter vendored when available, graceful system fallback */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Elevation (DESIGN.md prose: primary-tinted, 0 spread, 12% opacity) */
  --shadow-1: 0 2px 8px rgba(0, 32, 69, 0.08);
  --shadow-1-hover: 0 4px 16px rgba(0, 32, 69, 0.12);
  --shadow-3: 0 8px 24px rgba(0, 32, 69, 0.24);

  /* Overlay tokens */
  --color-border-level1: #e2e8f0;
  --color-scrim: rgba(24, 28, 30, 0.4);
}

/* Typography utilities (DESIGN.md lines 51–96) */
.type-display-lg { font: 700 48px/56px var(--font); letter-spacing: -0.02em; }
.type-headline-lg { font: 600 32px/40px var(--font); letter-spacing: -0.01em; }
.type-headline-lg-mobile { font: 600 28px/36px var(--font); letter-spacing: -0.01em; }
.type-headline-md { font: 600 24px/32px var(--font); }
.type-body-lg { font: 400 18px/28px var(--font); }
.type-body-md { font: 400 16px/24px var(--font); }
.type-label-md { font: 500 14px/20px var(--font); letter-spacing: 0.01em; }
.type-label-sm { font: 600 12px/16px var(--font); letter-spacing: 0.05em; text-transform: uppercase; }

/* Elevation utilities (DESIGN.md Elevation & Depth) */
.elev-1 { border: 1px solid var(--color-border-level1); box-shadow: var(--shadow-1); }
.glass { background: color-mix(in srgb, var(--color-surface) 80%, transparent);
         -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.elev-3 { box-shadow: var(--shadow-3); }

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}