/* Design Studio, tokens v0.5.0, look `sabeel`. Built by tools/build_tokens.py from tokens/sabeel/*.json; do not edit. */
[data-look="sabeel"] {
  --color-bg: #F6F1E4;
  --bg: var(--color-bg);
  --color-surface: #FFFDF7;
  --surface: var(--color-surface);
  --color-raise: #F1EAD8;
  --raise: var(--color-raise);
  --color-fg: #1B2A24;
  --fg: var(--color-fg);
  --color-muted: #5F6B62;
  --muted: var(--color-muted);
  --color-line: #E4DAC2;
  --line: var(--color-line);
  --color-accent: #0F4A3C;
  --accent: var(--color-accent);
  --color-on-accent: #FFFDF7;
  --accent-ink: var(--color-on-accent);
  --color-gold: #B08D3C;
  --gold: var(--color-gold);
  --color-gold-ink: #7D6020;
  --color-hero-lit: #1A6350;
  --color-hero-mid: #0F4A3C;
  --color-hero-deep: #0A3329;
  --color-hero-ink: #FFFAF0;
  --color-hero-muted: #E4D9BF;
  --color-hero-gold: #D6B468;
  --color-hero-rim-off: rgba(214, 180, 104, 0.34);
  --color-hero-glow: rgba(243, 213, 138, 0.2);
  --color-dock-fill: rgba(255, 253, 247, 0.9);
  --color-dock-edge: #E4DAC2;
  --color-dock-on-fill: #0F4A3C;
  --color-dock-on-ink: #FFFDF7;
  --color-dock-on-label: #0F4A3C;
  --color-dock-off-ink: #5F6B62;
  --color-dock-highlight: rgba(255, 255, 255, 0.7);
  --color-notice-fill: #EFE6CC;
  --color-notice-ink: #3E3A2A;
  --color-page-ground: #FFFDF7;
  --color-page-ink: #141414;
  --color-page-run: #6E6A5E;
  --color-page-frame: #C2A467;
  --color-page-sel: #E9D9A8;
  color-scheme: light;
  --font-family-name: "Marsa Name", "Readex Pro", system-ui, sans-serif;
  --font-family-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif;
  --font-family-quran: "Amiri Quran", serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-size-caption: 12px;
  --font-size-label: 13px;
  --font-size-body: 15px;
  --font-size-title: 18px;
  --font-size-headline: 28px;
  --font-size-display: 40px;
  --font-size-number: 64px;
  --font-size-brand: 25px;
  --font-size-dhikr: 23px;
  --font-size-dhikr-wide: 26px;
  --font-size-surah: 22px;
  --font-size-reader: 19px;
  --font-size-ayah: 24px;
  --font-size-tafsir: 18px;
  --font-line-height-tight: 1.05;
  --font-line-height-normal: 1.4;
  --font-line-height-reading: 1.95;
  --font-tracking-caps: 0.08;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --radius-sheet: 22px;
  --radius-row: 16px;
  --radius-dock: 28px;
  --radius-hero-foot: 26px;
  --radius-chip: 999px;
  --radius-arch: 999px;
  --size-tap: 44px;
  --size-dock: 64px;
  --size-dock-gap: 12px;
  --size-rail: 248px;
  --size-page: 1120px;
  --size-head: 56px;
  --size-mark: 30px;
  --size-mark-rail: 34px;
  --size-icon: 22px;
  --size-icon-row: 36px;
  --size-counter: 132px;
  --size-dial: 340px;
  --size-sheet: 420px;
  --size-switch-w: 50px;
  --size-switch-h: 30px;
  --size-meter: 220px;
  --size-measure: 680px;
  --size-panel: 440px;
  --shape-dock-indicator: 999px 999px 12px 12px;
  --motion-duration-press: 120ms;
  --motion-duration-move: 220ms;
  --motion-duration-settle: 320ms;
  --motion-duration-sweep: 700ms;
  --motion-easing-out: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --elevation-sheet: 0px 1px 2px 0px rgba(27, 42, 36, 0.06), 0px 10px 28px -14px rgba(15, 74, 60, 0.22);
  --elevation-dock: 0px 14px 34px -12px rgba(15, 74, 60, 0.4), 0px 2px 6px 0px rgba(27, 42, 36, 0.1);
  --elevation-hero: 0px 30px 44px -24px rgba(10, 51, 41, 0.6);
  --elevation-hero-niche: inset 0px 20px 34px -16px rgba(0, 0, 0, 0.38);
  --elevation-pressed: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}
[data-look="sabeel"][data-theme="dark"] {
  --color-bg: #0D1714;
  --bg: var(--color-bg);
  --color-surface: #13211C;
  --surface: var(--color-surface);
  --color-raise: #182A24;
  --raise: var(--color-raise);
  --color-fg: #ECE6D6;
  --fg: var(--color-fg);
  --color-muted: #A3AB9F;
  --muted: var(--color-muted);
  --color-line: #26382F;
  --line: var(--color-line);
  --color-accent: #8FD1B6;
  --accent: var(--color-accent);
  --color-on-accent: #0D1714;
  --accent-ink: var(--color-on-accent);
  --color-gold: #D9B867;
  --gold: var(--color-gold);
  --color-gold-ink: #D9B867;
  --color-hero-lit: #16594A;
  --color-hero-mid: #0C3B30;
  --color-hero-deep: #082A22;
  --color-hero-ink: #FFFAF0;
  --color-hero-muted: #E4D9BF;
  --color-hero-gold: #D6B468;
  --color-hero-rim-off: rgba(214, 180, 104, 0.3);
  --color-hero-glow: rgba(243, 213, 138, 0.16);
  --color-dock-fill: rgba(19, 33, 28, 0.88);
  --color-dock-edge: #26382F;
  --color-dock-on-fill: #8FD1B6;
  --color-dock-on-ink: #0D1714;
  --color-dock-on-label: #8FD1B6;
  --color-dock-off-ink: #A3AB9F;
  --color-dock-highlight: rgba(255, 255, 255, 0.06);
  --color-notice-fill: #1D2A22;
  --color-notice-ink: #D9D3BE;
  --color-page-ground: #0E1613;
  --color-page-ink: #ECE6D6;
  --color-page-run: #A39E8E;
  --color-page-frame: #8A7442;
  --color-page-sel: #3A3320;
  color-scheme: dark;
  --elevation-sheet: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 12px 28px -14px rgba(0, 0, 0, 0.45);
  --elevation-dock: 0px 14px 34px -10px rgba(0, 0, 0, 0.6), 0px 2px 6px 0px rgba(0, 0, 0, 0.35);
  --elevation-hero: 0px 30px 44px -24px rgba(0, 0, 0, 0.65);
  --elevation-hero-niche: inset 0px 20px 34px -16px rgba(0, 0, 0, 0.5);
  --elevation-pressed: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
}