/* Generated from tokens.json v3.4. Named scales are canonical for NEW work. Numeric tokens are legacy-reference-only. */
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Tajawal-Regular.woff2") format("woff2"); }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Tajawal-Medium.woff2") format("woff2"); }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Tajawal-Bold.woff2") format("woff2"); }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Tajawal-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); }
:root {
  --petrol: #0E2A2F;
  --petrol-deep: #081E22;
  --brass: #C8A24A;
  --bone: #EFE7D6;
  --teal: #4FA89F;
  --oxblood: #B24433;
  --white: #F7F5EF;
  --muted: #94A3A0;
  --surface: #0E2A2F;
  --surface-deep: #081E22;
  --text-primary: #EFE7D6;
  --accent: #C8A24A;
  --accent-secondary: #4FA89F;
  --danger: #B24433;
  --font-arabic: "Tajawal", sans-serif;
  --font-english: "IBM Plex Sans", sans-serif;
  --font-numbers: "IBM Plex Mono", monospace;
  /* Canonical new-work scales; mapping arrays are preserved below. */
  --space-xs: 4px;
  --space-xs-legacy-values-px: "[2.0, 4.0, 5.0]";
  --space-sm: 8px;
  --space-sm-legacy-values-px: "[6.0, 8.0, 9.0]";
  --space-md: 12px;
  --space-md-legacy-values-px: "[10.0, 12.0, 13.0]";
  --space-lg: 16px;
  --space-lg-legacy-values-px: "[14.0, 16.0, 18.0]";
  --space-xl: 24px;
  --space-xl-legacy-values-px: "[20.0, 22.0, 24.0]";
  --space-2xl: 32px;
  --space-2xl-legacy-values-px: "[28.0, 30.0, 34.0]";
  --space-3xl: 48px;
  --space-3xl-legacy-values-px: "[44.0, 46.0, 50.0]";
  --space-4xl: 64px;
  --space-4xl-legacy-values-px: "[56.0, 66.0]";
  --space-5xl: 80px;
  --space-5xl-legacy-values-px: "[72.0, 76.0, 80.0]";
  --type-caption: 16.0px;
  --type-caption-legacy-values-px: "[12.0, 13.0, 14.0, 15.0]";
  --type-caption-line-height-latin: 1.4;
  --type-caption-line-height-arabic: 1.5;
  --type-body: 20.0px;
  --type-body-legacy-values-px: "[18.0, 20.0, 22.0]";
  --type-body-line-height-latin: 1.55;
  --type-body-line-height-arabic: 1.7;
  --type-body-lg: 25.0px;
  --type-body-lg-legacy-values-px: "[25.0, 26.0, 28.0]";
  --type-body-lg-line-height-latin: 1.55;
  --type-body-lg-line-height-arabic: 1.7;
  --type-h4: 31.25px;
  --type-h4-legacy-values-px: "[34.0]";
  --type-h4-line-height-latin: 1.15;
  --type-h4-line-height-arabic: 1.35;
  --type-h3: 39.0625px;
  --type-h3-legacy-values-px: "[42.0]";
  --type-h3-line-height-latin: 1.15;
  --type-h3-line-height-arabic: 1.35;
  --type-h2: 48.828125px;
  --type-h2-legacy-values-px: "[46.0]";
  --type-h2-line-height-latin: 1.15;
  --type-h2-line-height-arabic: 1.35;
  --type-h1: 61.035156px;
  --type-h1-legacy-values-px: "[]";
  --type-h1-line-height-latin: 1.15;
  --type-h1-line-height-arabic: 1.35;
  --type-display: 76.293945px;
  --type-display-legacy-values-px: "[86.0]";
  --type-display-line-height-latin: 1.1;
  --type-display-line-height-arabic: 1.3;
  --radius-sm: 6px;
  --radius-sm-legacy-values-px: "[6.0]";
  --radius-md: 14px;
  --radius-md-legacy-values-px: "[14.0, 16.0]";
  --radius-lg: 22px;
  --radius-lg-legacy-values-px: "[18.0, 20.0, 22.0, 24.0]";
  --radius-xl: 34px;
  --radius-xl-legacy-values-px: "[34.0]";
  --radius-pill: 999px;
  --radius-pill-legacy-values-px: "[999.0]";
  /* Legacy aliases: retained verbatim, not recommended for new work. */
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-30: 30px;
  --space-34: 34px;
  --space-44: 44px;
  --space-46: 46px;
  --space-50: 50px;
  --space-56: 56px;
  --space-66: 66px;
  --space-72: 72px;
  --space-76: 76px;
  --space-80: 80px;
  --type-12: 12px;
  --type-13: 13px;
  --type-14: 14px;
  --type-15: 15px;
  --type-18: 18px;
  --type-20: 20px;
  --type-22: 22px;
  --type-25: 25px;
  --type-26: 26px;
  --type-28: 28px;
  --type-34: 34px;
  --type-42: 42px;
  --type-46: 46px;
  --type-86: 86px;
  --radius-6: 6px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-22: 22px;
  --radius-24: 24px;
  --radius-34: 34px;
  --radius-999: 999px;
  --type-hero: clamp(46px,7vw,86px);
  --type-flow: clamp(20px,3vw,34px);
  --line-height-latin: 1.55;
  --line-height-arabic-display-existing: 1.2;
  --version: "3.4";
  --brand: "MoneyWithDrSaad";
  --market: "Jordan and MENA region";
  --primary-content-language: "Arabic";
  --core-idea: "[\"Knowledge\", \"Financial Clarity\", \"Growth\"]";
  --positioning: "Finance educator and university professor bridging academic finance with hands-on investing, business operations and consulting experience.";
  --authority-education-phd: "PhD in Banking & Finance — Loughborough University, UK";
  --authority-education-mba: "MBA — University of South Florida, USA";
  --authority-education-bsc-finance: "Bachelor of Science in Finance — University of South Florida, USA";
  --authority-education-years: "13+";
  --authority-hands-on-experience-years: "15+";
  --authority-investing-markets: "[\"United States equity market\", \"Jordanian equity market\"]";
  --color-roles-petrol: "Authority";
  --color-roles-bone: "Financial Clarity";
  --color-roles-teal: "Intelligence / Progress";
  --color-roles-brass: "Hairlines, underlines, key figures and selective CTAs; never large fills.";
  --color-roles-oxblood: "Danger only: risk, warnings, mistakes and negative comparisons; never decoration.";
  --recommended-color-balance-percent-petrol: 48;
  --recommended-color-balance-percent-bone: 22;
  --recommended-color-balance-percent-teal: 15;
  --recommended-color-balance-percent-brass: 12;
  --recommended-color-balance-percent-oxblood: 3;
  --logo-concept: "[\"open book\", \"rising market bars\", \"upward growth arrow\", \"open outer arc\"]";
  --logo-arc-rule: "The outer arc must remain open.";
  --logo-tiers: "[{\"tier\": \"Primary Emblem\", \"recommendedScreenRangePx\": \"384 and above\", \"minimumScreenPx\": 384, \"minimumPrintMm\": 35, \"clearSpaceHeightFraction\": 0.25}, {\"tier\": \"Simplified Mark\", \"recommendedScreenRangePx\": \"192–383\", \"minimumScreenPx\": 192, \"minimumPrintMm\": 24, \"clearSpaceHeightFraction\": 0.25}, {\"tier\": \"Icon/Avatar Mark\", \"recommendedScreenRangePx\": \"96–191\", \"minimumScreenPx\": 96, \"minimumPrintMm\": 16, \"clearSpaceHeightFraction\": 0.25}, {\"tier\": \"Micro Mark\", \"recommendedScreenRangePx\": \"32–95\", \"minimumScreenPx\": 32, \"minimumPrintMm\": 10, \"clearSpaceHeightFraction\": 0.25}]";
  --logo-size-basis: "Largest visible mark dimension, excluding clear space or app-icon padding. Profile contexts can use Icon/Avatar above its default range.";
  --logo-small-size-restriction: "Favicon-scale exemption: at 32 px and below, the arc opening is not reliably legible. This is accepted for favicon and browser-tab use only, where recognition matters more than concept legibility. The exemption does not extend to any other application. The Micro Mark remains the correct tier for these placements, and the approved artwork is unchanged. A simplified ≤48 px Micro variant remains open as a future option and has not been produced.";
  --logo-favicon-policy-option: "B";
  --logo-favicon-policy-ico-sizes-px: "[32, 48]";
  --logo-favicon-policy-embedded16px-entry: false;
  --logo-favicon-policy-browser16px-behaviour: "A browser can downscale the 32px entry; implementation and selected source may vary by browser.";
  --logo-favicon-policy-exemption: "Favicon-scale exemption: at 32 px and below, the arc opening is not reliably legible. This is accepted for favicon and browser-tab use only, where recognition matters more than concept legibility. The exemption does not extend to any other application. The Micro Mark remains the correct tier for these placements, and the approved artwork is unchanged. A simplified ≤48 px Micro variant remains open as a future option and has not been produced.";
  --logo-favicon-policy-future-simplified-micro-variant: "Not produced; remains a future option only.";
  --voice: "[\"clear\", \"direct\", \"evidence-led\", \"practical\", \"conversational\", \"risk-aware\"]";
  --avoid: "[\"guru language\", \"fake urgency\", \"unsupported certainty\", \"performative wealth\", \"unapproved colors\", \"closed logo arc\", \"large brass fills\", \"decorative oxblood\", \"manual deletion of logo elements\", \"logo distortion\", \"logo rotation\", \"logo effects\"]";
  --last-updated: "2026-09-06";
  --arc-rule: "The outer arc must remain open.";
  --names-english-full: "Dr. Sad Abu Alim";
  --names-arabic-full: "د. سعد أبو عليم";
  --names-display: "Dr. Sad";
  --names-brand-domain: "MoneyWithDrSaad";
  --names-arabic-brand: "مع الدكتور سعد";
  --names-domain-spelling-note: "MoneyWithDrSaad intentionally differs from the personal spelling Sad.";
  --recommended-color-balance-interpretation: "Directional visual weight across the ecosystem, not measurable coverage, per-design quotas, or permission for brass fills. Locked colour-use rules always govern.";
  --source-of-truth: "tokens.json is the canonical machine-readable source; tokens.css is its generated CSS projection. Rationalised scales govern new work; legacyReference preserves extracted v3.3 values. Section 17 contains only a pointer and brand-safety rules.";
  --arc-rationale: "The outer arc is open because growth has no fixed ceiling — the horizon expands with it rather than containing it. This reflects the going-concern assumption in finance: an entity valued in perpetuity, carried across generations, not a closed cycle. Never close the arc. Never break or cut it either — the openness is expansion, not rupture.";
  --scale-policy-canonical-for-new-work: "[\"spacingScale\", \"typeScale\", \"radiusScale\"]";
  --scale-policy-legacy-reference-only: "legacyReference";
  --scale-policy-existing-guide-restyled: false;
  --scale-policy-migration-rule: "Map each legacy pixel value to the nearest new value; exact ties map upward. Explicit legacyValuesPx arrays provide the authoritative mapping. Empty arrays identify new steps without a legacy counterpart. Migrate deliberately; do not auto-replace values in the existing guide.";
  --scale-policy-type-derivation: "Eight-step major-third modular scale: caption=16px, each following step=previous×1.25; stored to six decimal places. Derived mathematical specification for new work, not a historical extracted scale.";
  --scale-policy-line-height-derivation: "Unitless role values selected within the existing v3.3 Latin/Arabic guidance: caption 1.4/1.5; body 1.55/1.7; headings 1.15/1.35; display 1.1/1.3.";
  --scale-policy-radius-derivation: "Four representative existing radii 6/14/22/34px, plus the existing 999px pill.";
  --scale-policy-fluid-legacy-migration: "Retain original clamp expressions in existing CSS. For new fluid typography, choose named endpoints explicitly; the legacy pixel endpoint mapping does not prescribe viewport interpolation.";
  --font-assets-directory: "01 - Brand Assets & Portraits/Fonts";
  --font-assets-licence-file: "01 - Brand Assets & Portraits/Fonts/FONT-LICENCE.txt";
  --font-assets-weight-substitutions: "[]";
  --font-assets-faces: "[{\"family\": \"Tajawal\", \"weight\": 400, \"style\": \"normal\", \"woff2\": \"Tajawal-Regular.woff2\", \"ttf\": \"Tajawal-Regular.ttf\"}, {\"family\": \"Tajawal\", \"weight\": 500, \"style\": \"normal\", \"woff2\": \"Tajawal-Medium.woff2\", \"ttf\": \"Tajawal-Medium.ttf\"}, {\"family\": \"Tajawal\", \"weight\": 700, \"style\": \"normal\", \"woff2\": \"Tajawal-Bold.woff2\", \"ttf\": \"Tajawal-Bold.ttf\"}, {\"family\": \"Tajawal\", \"weight\": 800, \"style\": \"normal\", \"woff2\": \"Tajawal-ExtraBold.woff2\", \"ttf\": \"Tajawal-ExtraBold.ttf\"}, {\"family\": \"IBM Plex Sans\", \"weight\": 400, \"style\": \"normal\", \"woff2\": \"IBMPlexSans-Regular.woff2\", \"ttf\": \"IBMPlexSans-Regular.ttf\"}, {\"family\": \"IBM Plex Sans\", \"weight\": 600, \"style\": \"normal\", \"woff2\": \"IBMPlexSans-SemiBold.woff2\", \"ttf\": \"IBMPlexSans-SemiBold.ttf\"}, {\"family\": \"IBM Plex Mono\", \"weight\": 500, \"style\": \"normal\", \"woff2\": \"IBMPlexMono-Medium.woff2\", \"ttf\": \"IBMPlexMono-Medium.ttf\"}]";
}