/* Generated by tools/build-tokens.mjs from design/tokens.json. Do not edit. */
:root {
  --bg: #F7F5F0;
  --surface: #FFFFFF;
  --surface-sunken: #EDEAE2;
  --text: #14201C;
  --text-muted: #4A5752;
  --border: #D5D9D4;
  --border-strong: #6E7A75;
  --primary: #0B5D4B;
  --primary-pressed: #084638;
  --on-primary: #FFFFFF;
  --aligned: #0E7A3F;
  --aligned-bg: #E2F3E8;
  --aligned-text: #0A5A2E;
  --warning-bg: #FFF3D1;
  --warning-border: #A87300;
  --warning-text: #5C3F00;
  --danger-bg: #FCE9E7;
  --danger-border: #B3261E;
  --danger-text: #8C1D16;
  --dial: #FFFFFF;
  --dial-tick: #6E7A75;
  --dial-north: #B3261E;
  --kaaba: #14201C;
  --kaaba-edge: #14201C;
  --kaaba-band: #B8860B;
  --focus: #0A58CA;
  --scrim: rgba(20, 32, 28, 0.48);
  --font: system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", "Geeza Pro", "Noto Sans", Tahoma, Arial, sans-serif;
  --fs-xs: 14px;
  --fs-sm: 16px;
  --fs-base: 18px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fs-2xl: 36px;
  --fs-display: 56px;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-base: 1.5;
  --lh-arabic: 1.7;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --bw-thin: 1px;
  --bw-thick: 2px;
  --bw-aligned-ring: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --sh-button: 0 1px 2px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.10);
  --sh-sheet: 0 -8px 32px rgba(0, 0, 0, 0.24);
  --touch: 48px;
  --btn-h: 64px;
  --dial-w: min(80cqw, 46cqh, 340px);
  --content-max: 480px;
  --icon: 24px;
  --focus-w: 3px;
  --focus-off: 3px;
  --dial-w-compact: min(64cqw, 32cqh, 260px);
  --dur-fast: 150ms;
  --dur: 250ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --z-header: 10;
  --z-sheet: 20;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1513;
    --surface: #17211E;
    --surface-sunken: #0A100E;
    --text: #EEF2EF;
    --text-muted: #A9B6B0;
    --border: #2C3934;
    --border-strong: #7D8B85;
    --primary: #5FD3A8;
    --primary-pressed: #43B78D;
    --on-primary: #06261C;
    --aligned: #4FD98A;
    --aligned-bg: #0F3220;
    --aligned-text: #8EF0B6;
    --warning-bg: #2E2410;
    --warning-border: #D9A43A;
    --warning-text: #FFD98A;
    --danger-bg: #3A1714;
    --danger-border: #FF8A80;
    --danger-text: #FFB4AB;
    --dial: #17211E;
    --dial-tick: #7D8B85;
    --dial-north: #FF8A80;
    --kaaba: #000000;
    --kaaba-edge: #7D8B85;
    --kaaba-band: #E0B44A;
    --focus: #8AB4FF;
    --scrim: rgba(0, 0, 0, 0.64);
  }
}