/* ============================================================
   tokens.css — single source of truth for the design system.
   Linked from every page BEFORE components.css.

   Layout:
     1. Colors (core, gold, overlays, pastels)
     2. Radius
     3. Spacing scale (4-base, 10 steps from 4 → 128)
     4. Semantic spacing tokens (use these, not raw scale)
     5. Typography scale (responsive clamps)
     6. Shadows
     7. Easing
     8. Responsive overrides — at tablet (≤900) and mobile
        (≤600) the section / container / card / heading-rhythm
        tokens step down so spacing scales with type, automatically.
   ============================================================ */

:root {
  /* ── Core (10) ─────────────────────────────────────── */
  --bg:        #0A0B0C;
  --surface:   #131518;
  --card:      #1C1E24;
  --card-hi:   #24262E;
  --text:      #F8F9FA;
  --text-inv:  #0A0B0C;
  --muted:     #9098A8;
  --border:    rgba(255,255,255,0.10);
  --border-hi: rgba(255,255,255,0.50);
  --accent:    #F7BE14;

  /* ── Gold (solid + gradient) ───────────────────────── */
  --gold:       #F7BE14;
  --gold-grad:  linear-gradient(135deg, #F7BE14 0%, #FFD84D 100%);

  /* legacy aliases — kept so old code still resolves */
  --accent-hi:   #FFD84D;
  --accent-deep: #C58F00;
  --accent-dim:  rgba(247,190,20,0.10);
  --accent-glow: rgba(247,190,20,0.50);

  /* ── Overlays ──────────────────────────────────────── */
  --black-10: rgba(0,0,0,0.10);
  --black-50: rgba(0,0,0,0.50);
  --white-10: rgba(255,255,255,0.10);
  --white-50: rgba(255,255,255,0.50);

  /* ── Section pastels (gm scroll-cycle) ──────────────── */
  --tone-cream: #F9FFE7;
  --tone-sky:   #EDF9FF;
  --tone-rose:  #FCE8E6;
  --tone-peach: #FFE8DB;

  /* ── Radius ────────────────────────────────────────── */
  --r-xs:    4px;
  --r-sm:    8px;
  --r-md:    12px;
  --r-lg:    16px;
  --r-xl:    24px;
  --r-2xl:   32px;
  --r-full:  9999px;
  --r-round: 50%;

  /* ── Spacing scale — 4-base, 10 steps ─────────────────
     4, 8, 12, 16, 24, 32, 48, 64, 96, 128 */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  /* legacy aliases (old code still references these) */
  --s-11: 96px;
  --s-12: 96px;

  /* ── Semantic spacing — use these, not raw scale ─────
     Values below are DESKTOP defaults. Media queries at
     the bottom of this file step them down on tablet/mobile. */

  /* container + section
     --pad-section-x = where the letter "F" in the nav text "Fouad" starts.
       arithmetic: header-outer-pad (32) + nav-inner-pad-left (20) +
                   nav-logo-icon-width (26) + nav-logo-gap (9) = 87 desktop.
     every LEFT-ALIGNED section/card edge aligns to this vertical line.
     --pad-hero-x = a smaller value for CENTERED hero compositions
     (left/right padding only sets the maximum width of the centered
     block; tying that to the logo-text X would squeeze hero text). */
  --container-max:    1280px;
  --pad-section-x:    87px;                       /* F-text X on desktop */
  --pad-hero-x:       32px;                       /* hero outer breath, content stays centered */
  --gap-section:      var(--s-9);                 /* 96 — vertical between page sections */
  --gap-section-hero: 128px;                      /* hero gets slightly more breathing room */
  --nav-to-hero:      var(--s-9);                 /* 96 — distance from fixed nav to hero content */

  /* heading rhythm */
  --gap-caption-title: var(--s-3);                /* 12 — eyebrow/caption → title */
  --gap-title-line:    var(--s-3);                /* 12 — title → underline accent */
  --gap-title-desc:    var(--s-5);                /* 24 — title → description / paragraph */
  --gap-title-grid:    var(--s-6);                /* 32 — section title → grid/cards */
  --gap-paragraph:     var(--s-4);                /* 16 — paragraph → paragraph */
  --gap-stack:         var(--s-5);                /* 24 — default vertical stack */
  --gap-stack-lg:      var(--s-7);                /* 48 — between two related blocks */
  /* legacy alias for old code */
  --gap-eyebrow:       var(--gap-caption-title);
  --gap-title-body:    var(--gap-title-desc);

  /* grids */
  --gap-grid-sm:       var(--s-4);                /* 16 — small/tight UI */
  --gap-grid-md:       var(--s-5);                /* 24 — medium grids */
  --gap-grid-lg:       var(--s-6);                /* 32 — large grids */
  --gap-cards:         var(--gap-grid-md);        /* 24 — between cards in a grid (alias) */
  --gap-groups:        var(--s-7);                /* 48 — between grouped containers */

  /* cards */
  --pad-card:          var(--s-5);                /* 24 — desktop card padding */
  --pad-card-sm:       var(--s-4);                /* 16 — small cards / dense UI */
  --gap-card-image:    var(--s-4);                /* 16 — image → title inside a card */
  --gap-card-title:    var(--s-3);                /* 12 — title → description inside a card */
  --gap-card-cta:      var(--s-5);                /* 24 — description → button */

  /* nav + buttons */
  --nav-height:        80px;
  --pad-pill-y:        13px;
  --pad-pill-x:        26px;

  /* ── Typography scale — clamp(mobile, viewport, desktop)
     Floors are deliberately smaller than before so titles
     don't tower over mobile viewports. */
  --fs-caption:  12px;
  --fs-body:     15px;
  --fs-body-lg:  17px;
  --fs-h4:       clamp(18px, 1.6vw, 22px);
  --fs-h3:       clamp(22px, 2.4vw, 32px);
  --fs-h2:       clamp(28px, 3.6vw, 48px);
  --fs-h1:       clamp(36px, 5.4vw, 64px);
  --fs-display:  clamp(44px, 7vw, 96px);

  /* ── Shadow (4) ────────────────────────────────────── */
  --shadow-1:    0 2px 6px rgba(0,0,0,0.10);
  --shadow-2:    0 8px 24px rgba(0,0,0,0.10);
  --shadow-3:    0 20px 60px rgba(0,0,0,0.50);
  --shadow-glow: 0 8px 32px var(--accent-glow);

  /* ── Easing ────────────────────────────────────────── */
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ── Tablet — section/container/card spacing steps down.
     Headings keep their clamp() so they shrink with viewport. */
@media (max-width: 900px) {
  :root {
    --pad-section-x:     75px;       /* tablet: F-text X (24+16+26+9) */
    --pad-hero-x:        24px;
    --gap-section:       72px;
    --gap-section-hero:  96px;
    --nav-to-hero:       72px;
    --gap-title-desc:    var(--s-4);   /* 24 → 16 */
    --gap-title-grid:    var(--s-5);   /* 32 → 24 */
    --gap-stack-lg:      var(--s-6);   /* 48 → 32 */
    --gap-grid-lg:       var(--s-5);   /* 32 → 24 */
    --gap-grid-md:       var(--s-4);   /* 24 → 16 */
    --gap-groups:        var(--s-6);   /* 48 → 32 */
    --pad-card:          20px;
  }
}

/* ── Mobile — tighten further; spacing under titles drops
     because the titles themselves drop via their clamp(). */
@media (max-width: 600px) {
  :root {
    --pad-section-x:     16px;       /* mobile: flat 16px side margin */
    --pad-hero-x:        16px;
    --gap-section:       56px;
    --gap-section-hero:  72px;
    --nav-to-hero:       56px;
    --gap-title-desc:    var(--s-3);   /* 24 → 12 (mobile) */
    --gap-title-grid:    var(--s-5);   /* 32 → 24 */
    --gap-stack:         var(--s-4);   /* 24 → 16 */
    --gap-stack-lg:      var(--s-5);   /* 48 → 24 */
    --gap-grid-lg:       var(--s-5);   /* 32 → 24 — bump for breathing room */
    --gap-grid-md:       var(--s-5);   /* 24 (was 16 — wider grid gaps) */
    --gap-grid-sm:       var(--s-4);   /* 16 (was 12) */
    --gap-groups:        var(--s-6);   /* 48 → 32 */
    --pad-card:          16px;
    --gap-card-cta:      var(--s-3);   /* 24 → 12 — tighter desc → cta */
    --nav-height:        64px;
  }
}