/* Méridien tokens — generated by scripts/tokens.mjs from references/color-brands.json, type-brands.json, roles.json.
   Do not edit by hand: change the brand card and regenerate. Mirrors the Figma variables (Branding → Variables 849:58).
   <html data-brand="zain" data-theme="light"> · templates use roles only: var(--bg-page), var(--text-primary), var(--accent-primary)… */

/* Méridien — Brand · Palette + Brand · Type */
:root, [data-brand="meridien"] {
  --base-50: #EDEDED; --base-100: #E2E3E3; --base-200: #D2D2D2; --base-300: #B6B6B6; --base-400: #969797; --base-500: #77787A; --base-600: #5A5B5E; --base-700: #3E4043; --base-800: #282828; --base-900: #1C1D1F; --base-950: #000000;
  --brand-50: #FFF4EE; --brand-100: #FFE5D8; --brand-200: #FFCDB4; --brand-300: #FFA885; --brand-400: #FF7F53; --brand-500: #FF4400; --brand-600: #D03600; --brand-700: #A52800; --brand-800: #7B1C00; --brand-900: #591100; --brand-950: #380800;
  --accent1-50: #FEF8D9; --accent1-100: #FDECA7; --accent1-200: #FCD02C; --accent1-300: #EBBA00; --accent1-400: #D2A100; --accent1-500: #B88800; --accent1-600: #9A6D00; --accent1-700: #7C5300; --accent1-800: #5E3B00; --accent1-900: #442800; --accent1-950: #2B1600;
  --accent2-50: #F2F7FF; --accent2-100: #E0ECFF; --accent2-200: #C3DBFF; --accent2-300: #9AC3FF; --accent2-400: #71AAFF; --accent2-500: #3F8EFF; --accent2-600: #1A6FE1; --accent2-700: #0857B9; --accent2-800: #003F8E; --accent2-900: #012C65; --accent2-950: #001941;
  --key-brand: var(--brand-500); --key-brand-fine: var(--brand-600); --key-on-brand: var(--base-950); --key-accent1: var(--accent1-200); --key-accent2: var(--accent2-600);
  --heat-dark-0: var(--base-950); --heat-dark-1: #102D57; --heat-dark-2: #89358B; --heat-dark-3: var(--key-brand); --heat-dark-4: #FFA900; --heat-dark-5: #FDDC72; --heat-dark-6: #FEF7E1;
  --heat-light-0: var(--base-50); --heat-light-1: #F6DD8C; --heat-light-2: #FFA900; --heat-light-3: var(--key-brand); --heat-light-4: #CE2E3F; --heat-light-5: #AA2448; --heat-light-6: #871D48;
  --arc-0: #9E41E5; --arc-1: #EE5C9A;
  --grad-brand-0: var(--brand-950); --grad-brand-1: var(--brand-800); --grad-brand-2: var(--brand-600); --grad-brand-3: var(--key-brand); --grad-brand-4: var(--brand-300); --grad-brand-5: var(--brand-100); --grad-brand-6: var(--brand-50);
  --grad-greydient-0: var(--base-950); --grad-greydient-1: var(--accent2-900); --grad-greydient-2: var(--brand-700); --grad-greydient-3: var(--key-brand); --grad-greydient-4: var(--brand-300); --grad-greydient-5: var(--base-300); --grad-greydient-6: var(--base-50);
  --grad-ember-0: var(--base-950); --grad-ember-1: var(--brand-950); --grad-ember-2: var(--brand-700); --grad-ember-3: var(--key-brand); --grad-ember-4: var(--heat-dark-4); --grad-ember-5: var(--heat-dark-5);
  --grad-prism-0: var(--accent2-200); --grad-prism-1: var(--accent2-500); --grad-prism-2: var(--arc-0); --grad-prism-3: var(--arc-1); --grad-prism-4: var(--brand-300); --grad-prism-5: var(--key-brand); --grad-prism-6: var(--key-accent1);
  --font-base: 'Struve', sans-serif; --font-accent: 'Ayer Poster Cursive', 'Struve', sans-serif;
  --font-accent-weight: 900; --font-accent-style: italic; --accent-k: 0.955; --tr-accent: 0em;
  --fs-title-m-accent: 92px; --lh-title-m-accent: 84px; --fs-title-l-accent: 124px; --lh-title-l-accent: 116px; --fs-headline-accent: 160px; --lh-headline-accent: 148px; --fs-display-accent: 212px; --lh-display-accent: 196px; --fs-word-accent: 284px; --lh-word-accent: 264px; --fs-cover-accent: 380px; --lh-cover-accent: 352px;
}

/* Zain — Brand · Palette + Brand · Type */
[data-brand="zain"] {
  --base-50: #F3F3F3; --base-100: #E3E3E3; --base-200: #D2D2D2; --base-300: #B6B6B7; --base-400: #96979A; --base-500: #767780; --base-600: #575A6B; --base-700: #3A3D59; --base-800: #2F3253; --base-900: #20224C; --base-950: #141045;
  --brand-50: #F4F7FF; --brand-100: #E4EBFF; --brand-200: #CBD8FF; --brand-300: #AABEFF; --brand-400: #8AA3FF; --brand-500: #6985FF; --brand-600: #4759FF; --brand-700: #3643D4; --brand-800: #262FA2; --brand-900: #192075; --brand-950: #0D114C;
  --accent1-50: #F7F5FF; --accent1-100: #EBE8FF; --accent1-200: #DAD2FF; --accent1-300: #C3B4FF; --accent1-400: #AE95FF; --accent1-500: #9970FF; --accent1-600: #8C52FF; --accent1-700: #672FC7; --accent1-800: #4D1E98; --accent1-900: #36146D; --accent1-950: #200947;
  --accent2-50: #FFF5EA; --accent2-100: #FFE7CC; --accent2-200: #FFD099; --accent2-300: #FFAD3F; --accent2-400: #E89400; --accent2-500: #C77E00; --accent2-600: #A86300; --accent2-700: #894A00; --accent2-800: #6A3200; --accent2-900: #4E1F00; --accent2-950: #340E00;
  --key-brand: var(--brand-600); --key-brand-fine: var(--brand-600); --key-on-brand: var(--base-50); --key-accent1: var(--accent1-600); --key-accent2: var(--accent2-600);
  --heat-dark-0: var(--base-950); --heat-dark-1: #331A63; --heat-dark-2: #4A42CD; --heat-dark-3: var(--key-brand); --heat-dark-4: #BCB2FF; --heat-dark-5: #DFD8FF; --heat-dark-6: #F7F5FF;
  --heat-light-0: var(--base-50); --heat-light-1: #DFD8FF; --heat-light-2: #BCB2FF; --heat-light-3: var(--key-brand); --heat-light-4: #3B41C4; --heat-light-5: #30319C; --heat-light-6: #252277;
  --arc-0: #7460E5; --arc-1: #848FEB;
  --grad-brand-0: var(--brand-950); --grad-brand-1: var(--brand-800); --grad-brand-2: var(--brand-700); --grad-brand-3: var(--key-brand); --grad-brand-4: var(--brand-300); --grad-brand-5: var(--brand-100); --grad-brand-6: var(--brand-50);
  --grad-greydient-0: var(--base-950); --grad-greydient-1: var(--accent1-900); --grad-greydient-2: var(--brand-800); --grad-greydient-3: var(--key-brand); --grad-greydient-4: var(--brand-300); --grad-greydient-5: var(--base-300); --grad-greydient-6: var(--base-50);
  --grad-ember-0: var(--base-950); --grad-ember-1: var(--brand-950); --grad-ember-2: var(--brand-800); --grad-ember-3: var(--key-brand); --grad-ember-4: var(--heat-dark-4); --grad-ember-5: var(--heat-dark-5);
  --grad-prism-0: var(--accent1-200); --grad-prism-1: var(--accent1-500); --grad-prism-2: var(--arc-0); --grad-prism-3: var(--arc-1); --grad-prism-4: var(--brand-300); --grad-prism-5: var(--key-brand); --grad-prism-6: var(--key-accent1);
  --font-base: 'Casus Pro', sans-serif; --font-accent: 'November Cond Pro', 'Casus Pro', sans-serif;
  --font-accent-weight: 900; --font-accent-style: normal; --accent-k: 0.957; --tr-accent: -0.02em;
  --fs-title-m-accent: 68px; --lh-title-m-accent: 64px; --fs-title-l-accent: 92px; --lh-title-l-accent: 88px; --fs-headline-accent: 124px; --lh-headline-accent: 116px; --fs-display-accent: 160px; --lh-display-accent: 152px; --fs-word-accent: 216px; --lh-word-accent: 204px; --fs-cover-accent: 284px; --lh-cover-accent: 268px;
}

/* Brand · Roles — dark */
:root, [data-theme="dark"], [data-theme="dark"] [data-brand], [data-brand][data-theme="dark"] {
  --bg-page: var(--base-950);
  --bg-surface: var(--base-900);
  --bg-surface-2: var(--base-800);
  --bg-inverse: var(--base-50);
  --bg-accent: var(--key-brand);
  --text-primary: var(--base-50);
  --text-secondary: var(--base-400);
  --text-muted: var(--base-700);
  --text-on-accent: var(--key-on-brand);
  --line-graphic: var(--base-600);
  --line-grid: var(--base-800);
  --accent-primary: var(--key-brand);
  --accent-fine: var(--key-brand);
  --accent-subtle: var(--brand-900);
  --marker-bg: var(--accent-primary);
  --marker-text: var(--text-on-accent);
  --data-1: var(--key-brand);
  --data-2: var(--accent1-500);
  --data-3: var(--accent2-500);
  --data-neutral: var(--base-500);
  --heat-0: var(--heat-dark-0);
  --heat-1: var(--heat-dark-1);
  --heat-2: var(--heat-dark-2);
  --heat-3: var(--heat-dark-3);
  --heat-4: var(--heat-dark-4);
  --heat-5: var(--heat-dark-5);
  --heat-6: var(--heat-dark-6);
}

/* Brand · Roles — light */
[data-theme="light"], [data-theme="light"] [data-brand], [data-brand][data-theme="light"] {
  --bg-page: var(--base-50);
  --bg-surface: var(--base-100);
  --bg-surface-2: var(--base-200);
  --bg-inverse: var(--base-950);
  --bg-accent: var(--key-brand);
  --text-primary: var(--base-950);
  --text-secondary: var(--base-600);
  --text-muted: var(--base-300);
  --text-on-accent: var(--key-on-brand);
  --line-graphic: var(--base-500);
  --line-grid: var(--base-200);
  --accent-primary: var(--key-brand);
  --accent-fine: var(--key-brand-fine);
  --accent-subtle: var(--brand-100);
  --marker-bg: var(--accent-primary);
  --marker-text: var(--text-on-accent);
  --data-1: var(--key-brand-fine);
  --data-2: var(--accent1-600);
  --data-3: var(--accent2-600);
  --data-neutral: var(--base-500);
  --heat-0: var(--heat-light-0);
  --heat-1: var(--heat-light-1);
  --heat-2: var(--heat-light-2);
  --heat-3: var(--heat-light-3);
  --heat-4: var(--heat-light-4);
  --heat-5: var(--heat-light-5);
  --heat-6: var(--heat-light-6);
}

/* Brand · Type sizes (shared by every brand) + Layout (grid v1) */
:root {
  --fs-label: 16px; --lh-label: 20px; --tr-label: 0.01em;
  --fs-caption: 18px; --lh-caption: 24px; --tr-caption: 0em;
  --fs-body: 24px; --lh-body: 32px; --tr-body: 0em;
  --fs-lead: 32px; --lh-lead: 40px; --tr-lead: -0.01em;
  --fs-subhead: 40px; --lh-subhead: 48px; --tr-subhead: -0.02em;
  --fs-title-s: 56px; --lh-title-s: 60px; --tr-title-s: -0.02em;
  --fs-title-m: 72px; --lh-title-m: 76px; --tr-title-m: -0.025em;
  --fs-title-l: 96px; --lh-title-l: 96px; --tr-title-l: -0.03em;
  --fs-headline: 128px; --lh-headline: 124px; --tr-headline: -0.03em;
  --fs-display: 168px; --lh-display: 156px; --tr-display: -0.035em;
  --fs-word: 224px; --lh-word: 208px; --tr-word: -0.04em;
  --fs-cover: 296px; --lh-cover: 268px; --tr-cover: -0.045em;
  --fs-number-l: 400px; --lh-number-l: 344px; --tr-number-l: -0.045em;
  --fs-number-xl: 536px; --lh-number-xl: 440px; --tr-number-xl: -0.045em;
  --slide-w: 1920px; --slide-h: 1080px;
  --grid-columns: 24; --grid-rows: 16;
  --g-gap: 16px; --g-margin: 56px; --g-col: 60px; --g-row: 45.5px; --g-col-step: 76px; --g-row-step: 61.5px;
}