/* ============================================================
   Alfan Design System — Colors & Type
   ============================================================
   Sourced from ALFAN BRAND GUIDELINES 2024 (uploaded PDF).
   Tagline: "Where Creators Thrive and Brands Shine."
   Icon concept: megaphone (the "A")
   ============================================================ */

/* -------- Fonts (per guidelines) --------
   Latin: Alexandria (ExtraBold, Medium, Light) — Google Fonts
   Arabic: Somar (Black, Bold, Regular) — proprietary, substitute with Cairo
   FLAG: Somar is proprietary; Cairo is the closest free match. Replace when
   licensed Somar files are dropped into fonts/.
--------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

@font-face { font-family: 'Somar'; src: url('fonts/Somar-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Somar'; src: url('fonts/Somar-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Somar'; src: url('fonts/Somar-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Somar'; src: url('fonts/Somar-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Somar'; src: url('fonts/Somar-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Somar'; src: url('fonts/Somar-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ---------- Primary (§4.1) ---------- */
  --brand-red:        #FF002B;  /* RED — hero, icon, primary accent */
  --brand-chocolate:  #21000E;  /* DARK CHOCOLATE — body ink, backgrounds */
  --brand-cloud:      #F4F0ED;  /* CLOUD — warm canvas */

  /* ---------- Secondary (§4.2) — audience split ----------
     House rule: Helio (pink) → Creators · Bumble Bee (yellow) → Brands
     (Guidelines §4.2 defines the tones; product convention locks the mapping.) */
  --brand-helio:      #E887F9;  /* HELIO — Creators audience */
  --brand-bumble:     #FFC41D;  /* BUMBLE BEE — Brands audience */

  /* ---------- Accent (§4.3) — UX/UI ONLY, <=10% ---------- */
  --brand-brick:      #C6490A;
  --brand-iris:       #500599;
  --brand-cherry:     #9B152B;
  --brand-emerald:    #068E3D;

  /* ---------- Specialty tone ramps (§4.5) ---------- */
  --red-1:#FF002B; --red-2:#FD3052; --red-3:#FB6079; --red-4:#F8909F; --red-5:#F6C0C6;
  --choc-1:#21000E; --choc-2:#4B303B; --choc-3:#756067; --choc-4:#A09094; --choc-5:#CAC0C0;
  --helio-1:#E887F9; --helio-2:#EA9CF7; --helio-3:#EDB1F4; --helio-4:#EFC6F2; --helio-5:#F2DBEF;
  --bumble-1:#FFC41D; --bumble-2:#FDCD47; --bumble-3:#FBD670; --bumble-4:#F8DE9A; --bumble-5:#F6E7C3;
  --brick-1:#C6490A; --brick-2:#CF6A37; --brick-3:#D88C65; --brick-4:#E2AD92; --brick-5:#EBCFC0;
  --iris-1:#500599; --iris-2:#7134AA; --iris-3:#9263BB; --iris-4:#B292CB; --iris-5:#D3C1DC;
  --cherry-1:#9B152B; --cherry-2:#AD4152; --cherry-3:#BF6D79; --cherry-4:#D0989F; --cherry-5:#E2C4C6;
  --em-1:#068E3D; --em-2:#36A260; --em-3:#65B583; --em-4:#95C9A7; --em-5:#C4DCCA;

  /* ---------- Semantic tokens ---------- */
  --bg:              var(--brand-cloud);
  --bg-elevated:     #FFFFFF;
  --bg-inset:        #EEE8E3;
  --bg-inverse:      var(--brand-chocolate);

  --fg:              var(--brand-chocolate);
  --fg-muted:        var(--choc-2);
  --fg-subtle:       var(--choc-3);
  --fg-disabled:     var(--choc-4);
  --fg-on-ink:       var(--brand-cloud);
  --fg-on-red:       #FFFFFF;
  --fg-on-bumble:    var(--brand-chocolate);
  --fg-on-helio:     var(--brand-chocolate);

  --border:          var(--choc-5);
  --border-strong:   var(--choc-4);
  --border-focus:    var(--brand-red);

  --accent:          var(--brand-red);
  --accent-hover:    #D3001F;
  --success:         var(--brand-emerald);
  --warning:         var(--brand-bumble);
  --danger:          var(--brand-red);

  /* ---------- Type families ---------- */
  --font-latin:   'Alexandria', system-ui, -apple-system, sans-serif;
  --font-arabic:  'Somar', 'Alexandria', system-ui, sans-serif;
  --font-display: 'Alexandria', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Per guidelines: Headlines ExtraBold(800), Sub-heads Medium(500), Body Light(300), CTA Medium(500) */
  --fw-headline: 800;
  --fw-subhead:  500;
  --fw-body:     300;
  --fw-cta:      500;
  --fw-strong:   700;

  /* ---------- Type scale ---------- */
  --fs-xs: 12px; --fs-sm: 13px; --fs-body: 15px; --fs-md: 17px;
  --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 40px;
  --fs-4xl: 56px; --fs-5xl: 72px; --fs-6xl: 96px;

  --lh-tight: 1.08; --lh-snug: 1.2; --lh-body: 1.5; --lh-loose: 1.65;
  --tracking-tight: -0.02em; --tracking-snug: -0.01em;
  --tracking-normal: 0; --tracking-caps: 0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---------- Radii (soft — mirrors rounded "A") ---------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(33,0,14,0.06);
  --shadow-sm: 0 2px 6px rgba(33,0,14,0.06), 0 1px 2px rgba(33,0,14,0.04);
  --shadow-md: 0 6px 16px rgba(33,0,14,0.10), 0 2px 4px rgba(33,0,14,0.04);
  --shadow-lg: 0 18px 40px rgba(33,0,14,0.12), 0 4px 10px rgba(33,0,14,0.04);
  --shadow-ring-focus: 0 0 0 3px rgba(255,0,43,0.25);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;

  /* ---------- Layout (§6.1 grid: 12 col, 4% margin, 1% gutter) ---------- */
  --maxw-prose: 640px; --maxw-content: 1120px; --maxw-wide: 1360px;
  --page-margin: 4%; --col-gutter: 1%;
}

html, body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-latin); font-weight: var(--fw-body);
  font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

[lang="ar"], [dir="rtl"] { font-family: var(--font-arabic); }

.t-display  { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-5xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.t-h1       { font-weight: 800; font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.t-h2       { font-weight: 800; font-size: var(--fs-3xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); }
.t-h3       { font-weight: 800; font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); }
.t-subhead  { font-weight: 500; font-size: var(--fs-lg); line-height: var(--lh-snug); }
.t-body     { font-weight: 300; font-size: var(--fs-body); line-height: var(--lh-body); }
.t-body-strong { font-weight: 500; font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small    { font-weight: 400; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--fg-muted); }
.t-xs       { font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--fg-subtle); }
.t-eyebrow  { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); }
.t-cta      { font-weight: 500; font-size: var(--fs-body); letter-spacing: -0.005em; }
.t-mono     { font-family: var(--font-mono); font-feature-settings: "tnum"; }