/* Generated from tokens.json by build_preview.py. Edit tokens.json and rebuild; never edit this file. */
:root, [data-theme="light"] {
  --paper: #FAF8F4;
  --surface: #FFFFFF;
  --surface-sunken: #F2EEE7;
  --line: #E4DED4;
  --line-control: #8C8579;
  --ink: #12242B;
  --ink-2: #4A5C63;
  --ink-muted: #5F6F75;
  --teal: #0F5257;
  --teal-hover: #0B4145;
  --teal-soft: #E2EEEE;
  --on-teal: #FFFFFF;
  --amber: #C2670B;
  --amber-soft: #FBF0DF;
  --amber-ink: #8F4A05;
  --focus: #0F5257;
  --band-low: #1D5F8A;
  --band-low-soft: #E4EFF7;
  --band-watch: #8A4F00;
  --band-watch-soft: #FBF0DF;
  --band-refer: #A12C25;
  --band-refer-soft: #FBE9E7;
  --state-substituted: #A12C25;
  --state-substituted-soft: #FBE9E7;
  --state-omitted: #4A5C63;
  --state-omitted-soft: #ECE8E1;
  --state-hesitated: #8A4F00;
  --state-hesitated-soft: #FBF0DF;
  --state-self-corrected: #0F5257;
  --state-self-corrected-soft: #E2EEEE;
  --state-inserted: #5B4A8B;
  --state-inserted-soft: #EEEAF6;
  --danger: #A12C25;
  --on-danger: #FFFFFF;
  --scrim: rgba(18, 36, 43, 0.45);
  --on-dusk: #FAF8F4;
  --on-dusk-2: #BFD6D3;
  --dusk-panel: rgba(250, 248, 244, 0.08);
  --dusk-line: rgba(250, 248, 244, 0.22);
  --dusk-action: #FAF8F4;
  --on-dusk-action: #0F5257;
  --shadow-card: 0 1px 2px rgba(18, 36, 43, 0.06);
  --shadow-overlay: 0 12px 32px rgba(18, 36, 43, 0.18);
  --shadow-lift: 0 1px 2px rgba(18, 36, 43, 0.06), 0 8px 20px -10px rgba(18, 36, 43, 0.22);
  --glow-key: 0 0 0 4px rgba(15, 82, 87, 0.12), 0 10px 28px -8px rgba(15, 82, 87, 0.55);
  --glow-dusk: 0 0 0 4px rgba(250, 248, 244, 0.14), 0 10px 30px -8px rgba(194, 103, 11, 0.55);
  --gradient-dusk: linear-gradient(135deg, #0F5257 0%, #0C3F44 55%, #12242B 100%);
  --gradient-dusk-glow: radial-gradient(55% 90% at 8% 0%, rgba(194, 103, 11, 0.30), rgba(194, 103, 11, 0) 70%);
  --gradient-primary: linear-gradient(180deg, #13656B 0%, #0F5257 100%);
  --gradient-paper: radial-gradient(90% 60% at 100% 0%, #EAF1EF 0%, rgba(234, 241, 239, 0) 70%);
  --gradient-voice: linear-gradient(270deg, #0F5257 0%, #0F5257 60%, #C2670B 100%);
  color-scheme: light;
}
[data-theme="dark"] {
  --paper: #0F191C;
  --surface: #16232A;
  --surface-sunken: #0B1316;
  --line: #27383F;
  --line-control: #71858C;
  --ink: #E8EEEE;
  --ink-2: #B0C0C5;
  --ink-muted: #93A5AB;
  --teal: #5FC0B2;
  --teal-hover: #7ED1C5;
  --teal-soft: #173236;
  --on-teal: #0B1A1C;
  --amber: #E39B50;
  --amber-soft: #33261A;
  --amber-ink: #EDB57A;
  --focus: #7ED1C5;
  --band-low: #7FB8E0;
  --band-low-soft: #16293A;
  --band-watch: #EDB57A;
  --band-watch-soft: #33261A;
  --band-refer: #F2958C;
  --band-refer-soft: #3A2120;
  --state-substituted: #F2958C;
  --state-substituted-soft: #3A2120;
  --state-omitted: #A3B3B8;
  --state-omitted-soft: #243238;
  --state-hesitated: #EDB57A;
  --state-hesitated-soft: #33261A;
  --state-self-corrected: #5FC0B2;
  --state-self-corrected-soft: #173236;
  --state-inserted: #B9A8EE;
  --state-inserted-soft: #2A2440;
  --danger: #F2958C;
  --on-danger: #0F191C;
  --scrim: rgba(0, 0, 0, 0.6);
  --on-dusk: #E8EEEE;
  --on-dusk-2: #A9C4C0;
  --dusk-panel: rgba(232, 238, 238, 0.06);
  --dusk-line: rgba(232, 238, 238, 0.18);
  --dusk-action: #7ED1C5;
  --on-dusk-action: #0B1A1C;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -10px rgba(0, 0, 0, 0.7);
  --glow-key: 0 0 0 4px rgba(95, 192, 178, 0.16), 0 10px 32px -8px rgba(95, 192, 178, 0.50);
  --glow-dusk: 0 0 0 4px rgba(232, 238, 238, 0.12), 0 10px 30px -8px rgba(227, 155, 80, 0.45);
  --gradient-dusk: linear-gradient(135deg, #153F44 0%, #0F2B30 55%, #0B1316 100%);
  --gradient-dusk-glow: radial-gradient(55% 90% at 8% 0%, rgba(227, 155, 80, 0.18), rgba(227, 155, 80, 0) 70%);
  --gradient-primary: linear-gradient(180deg, #7ED1C5 0%, #5FC0B2 100%);
  --gradient-paper: radial-gradient(90% 60% at 100% 0%, #132A2E 0%, rgba(19, 42, 46, 0) 70%);
  --gradient-voice: linear-gradient(270deg, #5FC0B2 0%, #5FC0B2 60%, #E39B50 100%);
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --size-touch: 44px;
  --size-min-screen: 768px;
  --size-content: 1120px;
  --size-reading: 760px;
  --size-sheet: 794px;
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
  --stagger: 40ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --reveal-distance: 12px;
  --cursor-dot: 10px;
  --cursor-ring: 44px;
  --font-sans: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
  --font-latin: Archivo, "Helvetica Neue", Arial, sans-serif;
}
.display { font-family: var(--font-sans); font-size: 40px; line-height: 56px; font-weight: 700; }
.numeral { font-family: var(--font-sans); font-size: 36px; line-height: 40px; font-weight: 700; }
.h1 { font-family: var(--font-sans); font-size: 28px; line-height: 42px; font-weight: 700; }
.h2 { font-family: var(--font-sans); font-size: 22px; line-height: 34px; font-weight: 600; }
.h3 { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 28px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 16px; line-height: 28px; font-weight: 600; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 24px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 500; }
.reading-child { font-family: var(--font-sans); font-size: 32px; line-height: 72px; font-weight: 500; }
.reading-child-lg { font-family: var(--font-sans); font-size: 40px; line-height: 88px; font-weight: 500; }
.reading-marked { font-family: var(--font-sans); font-size: 24px; line-height: 60px; font-weight: 500; }