/* HOS Design System — generated from tokens.json */
:root, [data-theme="day"] {
  --paper: #F6F1E7;
  --paper-raised: #FFFDF8;
  --paper-sunk: #ECE4D3;
  --ink: #231F20;
  --ink-muted: #5E5650;
  --line: #D9CFBC;
  --line-strong: #8A7F74;
  --orange: #F69322;
  --on-orange: #231F20;
  --orange-ink: #B3460B;
  --green: #3EB449;
  --on-green: #231F20;
  --leaf: #2F6B3A;
  --on-leaf: #FFFDF8;
  --leaf-soft: #DCEBC9;
  --sun: #F8EC22;
  --sun-soft: #FBF6B8;
  --focus: #231F20;
  --shadow-lift: 0 1px 2px rgba(35,31,32,0.06), 0 8px 24px rgba(35,31,32,0.08);
}
[data-theme="night"] {
  --paper: #161312;
  --paper-raised: #221D1B;
  --paper-sunk: #0E0C0B;
  --ink: #F6F1E7;
  --ink-muted: #B4A99E;
  --line: #3A3330;
  --line-strong: #7B7068;
  --orange: #F69322;
  --on-orange: #231F20;
  --orange-ink: #FF9C5E;
  --green: #4CC456;
  --on-green: #231F20;
  --leaf: #8CC152;
  --on-leaf: #231F20;
  --leaf-soft: #24331A;
  --sun: #F8EC22;
  --sun-soft: #38361A;
  --focus: #F8EC22;
  --shadow-lift: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.45);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-24: 96px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --font-display: "Bricolage Grotesque", "Alexandria", system-ui, sans-serif;
  --font-sans: "Instrument Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Instrument Sans", system-ui, sans-serif;
}
.display-xl { font-family: var(--font-display); font-size: 88px; line-height: 0.95; font-weight: 800; letter-spacing: -0.02em; }
.display-l { font-family: var(--font-display); font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; }
.h1 { font-family: var(--font-display); font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; }
.h2 { font-family: var(--font-display); font-size: 32px; line-height: 1.1; font-weight: 700; }
.h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 700; }
.body-l { font-family: var(--font-sans); font-size: 19px; line-height: 1.5; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-weight: 400; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 1.45; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 1.2; font-weight: 600; }
.numeral { font-family: var(--font-sans); font-size: 15px; line-height: 1.2; font-weight: 600; }
.ar-display { font-family: var(--font-display); font-size: 72px; line-height: 1.15; font-weight: 700; }
.ar-h2 { font-family: var(--font-arabic); font-size: 30px; line-height: 1.35; font-weight: 700; }
.ar-body { font-family: var(--font-arabic); font-size: 17px; line-height: 1.75; font-weight: 400; }