/* COPIED from Design-System/tokens.css by src/build.py: do not edit here. */
/* Binaa design tokens. GENERATED by src/tokens.py from brand/halaqat/brand.py and the brand guidelines:
   do not edit; change the source and run python3 src/tokens.py.
   Daylight on :root, Energy on [data-theme="dark"] (any element, so a section can switch).
   Type follows [lang]: Arabic is the default, English where lang="en". Fonts load separately. */

:root {
  --brand-blue: #2B67AD;
  --brand-teal: #019D91;
  --brand-mint: #4FC7B3;
  --brand-apricot: #FB8F47;
  --brand-deep: #06393A;
  --on-brand: #FFFFFF;
  --on-brand-teal: #03292A;
  --stage: #12161D;
  --stage-2: #232B3A;
  --f-display-ar: "Alexandria", "IBM Plex Sans Arabic", Tahoma, "Geeza Pro", sans-serif;
  --f-ar: "IBM Plex Sans Arabic", Tahoma, "Geeza Pro", sans-serif;
  --f-display: "DM Sans", "Alexandria", Arial, "Helvetica Neue", sans-serif;
  --f-latin: "Inter", "IBM Plex Sans Arabic", Arial, "Helvetica Neue", sans-serif;
  --f-mono: "DM Mono", Consolas, Menlo, ui-monospace, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --r-sm: 6px;
  --r: 8px;
  --r-card: 14px;
  --r-sheet: 24px;
  --r-pill: 999px;
  --max: 1232px;
  --gutter: 24px;
  --margin-phone: 16px;
  --nav-h: 64px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-settle: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
}

:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-2: #F7F8FA;
  --surface: #FFFFFF;
  --raised: #F2F4F7;
  --line: #E3E7ED;
  --fg: #0D1420;
  --fg-2: #4A5568;
  --fg-3: #6B7588;
  --primary: #018379;
  --link: #00756C;
  --blue: #2B67AD;
  --apricot: #FB8F47;
  --line-strong: #828DA1;
  --on-primary: #FFFFFF;
  --primary-hover: #00756C;
  --teal: #019D91;
  --mint: #4FC7B3;
  --on-apricot: #06393A;
  --line-2: #CBD2DC;
  --apricot-hover: #FDB47F;
  --tint: #E8F3F1;
  --focus: #018379;
  --danger: #C42B30;
  --danger-bg: #FDECEC;
  --scrim: rgba(22,26,34,.45);
  --glyph-mono: #000000;
  --status-not-started: #71717B;
  --status-not-started-bg: #EEEEEF;
  --status-not-started-text: #696A74;
  --status-in-practice: #2B67AD;
  --status-in-practice-bg: #E6EDF5;
  --status-in-practice-text: #2B67AD;
  --status-mastered: #00756C;
  --status-mastered-bg: #E0EEED;
  --status-mastered-text: #00756C;
  --status-on-hold: #B7791F;
  --status-on-hold-bg: #F6EFE4;
  --status-on-hold-text: #8E611F;
  --status-needs-attention: #C2410C;
  --status-needs-attention-bg: #F8E8E2;
  --status-needs-attention-text: #BB3F0D;
  --shadow-1: 0 1px 2px rgba(13,20,32,.06), 0 4px 12px rgba(13,20,32,.05);
  --shadow-2: 0 12px 32px -8px rgba(13,20,32,.18);
  --glow: 0 0 24px -4px rgba(1,157,145,.5);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161A22;
  --bg-2: #1A1F29;
  --surface: #1F2531;
  --raised: #283040;
  --line: #323B4D;
  --fg: #EEF2F8;
  --fg-2: #B0B9C9;
  --fg-3: #8792A6;
  --primary: #22CDB9;
  --link: #3CE8C6;
  --blue: #6FA3E8;
  --apricot: #FF9A52;
  --line-strong: #707A8C;
  --on-primary: #04221F;
  --primary-hover: #4FD9C8;
  --teal: #22CDB9;
  --mint: #3CE8C6;
  --on-apricot: #06393A;
  --line-2: #44506A;
  --apricot-hover: #FFB27A;
  --tint: rgba(34,205,185,.12);
  --focus: #22CDB9;
  --danger: #FF8B8B;
  --danger-bg: rgba(255,139,139,.14);
  --scrim: rgba(0,0,0,.55);
  --glyph-mono: #FFFFFF;
  --status-not-started: #8792A6;
  --status-not-started-bg: rgba(135,146,166,.14);
  --status-not-started-text: #B0B9C9;
  --status-in-practice: #6FA3E8;
  --status-in-practice-bg: rgba(111,163,232,.14);
  --status-in-practice-text: #6FA3E8;
  --status-mastered: #3CE8C6;
  --status-mastered-bg: rgba(60,232,198,.14);
  --status-mastered-text: #3CE8C6;
  --status-on-hold: #E8BC6A;
  --status-on-hold-bg: rgba(232,188,106,.14);
  --status-on-hold-text: #E8BC6A;
  --status-needs-attention: #FFA570;
  --status-needs-attention-bg: rgba(255,165,112,.14);
  --status-needs-attention-text: #FFA570;
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.22);
  --shadow-2: 0 12px 32px -8px rgba(0,0,0,.55);
  --glow: 0 0 28px -6px rgba(34,205,185,.45);
}

/* no theme chosen: follow the system */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #161A22;
    --bg-2: #1A1F29;
    --surface: #1F2531;
    --raised: #283040;
    --line: #323B4D;
    --fg: #EEF2F8;
    --fg-2: #B0B9C9;
    --fg-3: #8792A6;
    --primary: #22CDB9;
    --link: #3CE8C6;
    --blue: #6FA3E8;
    --apricot: #FF9A52;
    --line-strong: #707A8C;
    --on-primary: #04221F;
    --primary-hover: #4FD9C8;
    --teal: #22CDB9;
    --mint: #3CE8C6;
    --on-apricot: #06393A;
    --line-2: #44506A;
    --apricot-hover: #FFB27A;
    --tint: rgba(34,205,185,.12);
    --focus: #22CDB9;
    --danger: #FF8B8B;
    --danger-bg: rgba(255,139,139,.14);
    --scrim: rgba(0,0,0,.55);
    --glyph-mono: #FFFFFF;
    --status-not-started: #8792A6;
    --status-not-started-bg: rgba(135,146,166,.14);
    --status-not-started-text: #B0B9C9;
    --status-in-practice: #6FA3E8;
    --status-in-practice-bg: rgba(111,163,232,.14);
    --status-in-practice-text: #6FA3E8;
    --status-mastered: #3CE8C6;
    --status-mastered-bg: rgba(60,232,198,.14);
    --status-mastered-text: #3CE8C6;
    --status-on-hold: #E8BC6A;
    --status-on-hold-bg: rgba(232,188,106,.14);
    --status-on-hold-text: #E8BC6A;
    --status-needs-attention: #FFA570;
    --status-needs-attention-bg: rgba(255,165,112,.14);
    --status-needs-attention-text: #FFA570;
    --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.22);
    --shadow-2: 0 12px 32px -8px rgba(0,0,0,.55);
    --glow: 0 0 28px -6px rgba(34,205,185,.45);
  }
}

:root,
[lang|="ar"] {
  --font-heading: var(--f-display-ar);
  --font-body: var(--f-ar);
  --fs-display: clamp(2.25rem, 1.56522rem + 3.043vw, 4rem);
  --type-display: 600 var(--fs-display)/1.5 var(--f-display-ar);
  --fs-h1: clamp(1.875rem, 1.53261rem + 1.522vw, 2.75rem);
  --type-h1: 600 var(--fs-h1)/1.5 var(--f-display-ar);
  --fs-h2: clamp(1.5rem, 1.35326rem + 0.652vw, 1.875rem);
  --type-h2: 500 var(--fs-h2)/1.53 var(--f-display-ar);
  --fs-h3: 1.3125rem;
  --type-h3: 600 var(--fs-h3)/1.52 var(--f-ar);
  --fs-body: 1.0625rem;
  --type-body: 400 var(--fs-body)/1.76 var(--f-ar);
  --fs-caption: 0.8125rem;
  --type-caption: 500 var(--fs-caption)/1.62 var(--f-ar);
  --fs-label: 0.75rem;
  --type-label: 500 var(--fs-label)/1.5 var(--f-ar);
  --tracking-display: 0;
  --tracking-label: 0;
}

[lang|="en"] {
  --font-heading: var(--f-display);
  --font-body: var(--f-latin);
  --fs-display: clamp(2.5rem, 1.71739rem + 3.478vw, 4.5rem);
  --type-display: 600 var(--fs-display)/1.06 var(--f-display);
  --fs-h1: clamp(2rem, 1.6087rem + 1.739vw, 3rem);
  --type-h1: 600 var(--fs-h1)/1.12 var(--f-display);
  --fs-h2: clamp(1.625rem, 1.47826rem + 0.652vw, 2rem);
  --type-h2: 600 var(--fs-h2)/1.19 var(--f-display);
  --fs-h3: 1.375rem;
  --type-h3: 600 var(--fs-h3)/1.27 var(--f-display);
  --fs-body: 1rem;
  --type-body: 400 var(--fs-body)/1.56 var(--f-latin);
  --fs-caption: 0.8125rem;
  --type-caption: 500 var(--fs-caption)/1.38 var(--f-latin);
  --fs-label: 0.75rem;
  --type-label: 500 var(--fs-label)/1.33 var(--f-mono);
  --tracking-display: -.025em;
  --tracking-label: .08em;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}