/* ============================================================
   DESIGN TOKENS — Mostafa Khalil
   Every value downstream references this file. Colours and type
   are taken directly from the brand guidelines.
   ============================================================ */

:root {
  /* ---- brand palette (BrandGuidlines.pdf, "COLOR PALETTE") ---- */
  --c-green:      #4FBE9D;   /* Bright Green — primary accent          */
  --c-teal:       #2A9C94;   /* Mint Blue    — deep accent             */
  --c-gray:       #606161;   /* Gray         — secondary text, rules   */
  --c-black:      #231F20;   /* Black        — base dark ground        */
  --c-white:      #FFFEFF;   /* White        — base light ground       */
  --c-brown:      #674248;   /* Brown        — rare tertiary accent    */

  /* ---- derived surfaces (tints of the brand neutrals only) ---- */
  --c-ink:        #131011;   /* deepest ground, black pushed down      */
  --c-ink-2:      #1C1819;   /* raised dark surface                    */
  --c-paper:      #F7F7F6;   /* light ground, gray at ~3%              */
  --c-paper-2:    #EDEDEB;   /* recessed light surface                 */
  --c-hairline:   rgba(96, 97, 97, 0.22);
  --c-hairline-d: rgba(255, 254, 255, 0.14);

  /* ---- semantic roles: light sections ---- */
  --bg:           var(--c-paper);
  --fg:           var(--c-black);
  --fg-muted:     var(--c-gray);
  --rule:         var(--c-hairline);
  --accent:       var(--c-teal);   /* teal reads on light; green does not */
  --accent-solid: var(--c-green);  /* for fills + large display only      */

  /* ---- type ---- */
  --f-display: 'Jost', 'Century Gothic', 'Futura', system-ui, sans-serif;
  --f-body:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Fluid scale, 360px … 1600px viewport.
     The hero size is bounded by viewport HEIGHT as well as width, so a short
     laptop window can never push the headline past the fold. */
  --t-mega:  clamp(2.5rem, min(8.4vw, 13.5vh), 9.5rem);
  --t-xxl:   clamp(2.5rem,  6.2vw,  6rem);
  --t-xl:    clamp(2rem,     4.4vw,  4rem);
  --t-lg:    clamp(1.5rem,   2.6vw,  2.25rem);
  --t-md:    clamp(1.125rem, 1.5vw,  1.375rem);
  --t-body:  clamp(1rem,     1.05vw, 1.0625rem);
  --t-sm:    0.875rem;
  --t-xs:    0.75rem;
  --t-mono:  0.6875rem;

  --lh-tight: 0.92;
  --lh-snug:  1.12;
  --lh-body:  1.65;

  --ls-mega: -0.045em;
  --ls-tight: -0.02em;
  --ls-wide:  0.14em;
  --ls-wider: 0.26em;

  /* ---- rhythm ---- */
  --gutter:  clamp(1.25rem, 4.5vw, 5.5rem);
  --section: clamp(3.25rem, 6.5vh, 5.5rem);
  --stack:   clamp(1.5rem, 3vw, 3rem);
  --maxw:    98rem;

  /* ---- motion ---- */
  --e-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --e-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --e-soft:  cubic-bezier(0.33, 1, 0.68, 1);
  --d-fast:  0.32s;
  --d-mid:   0.62s;
  --d-slow:  1.05s;

  /* ---- layers ----
     The nav sits ABOVE the mobile menu on purpose: the close button lives
     inside the nav, and a child cannot escape its parent's stacking context,
     so a lower nav would bury its own X behind the open overlay. */
  --z-canvas:    0;
  --z-content:   10;
  --z-frame:     90;
  --z-menu:     200;
  --z-nav:      210;
  --z-cursor:   300;
  --z-preload:  400;
}

/* Dark sections invert the semantic roles only — palette never changes. */
.is-dark {
  --bg:       var(--c-ink);
  --fg:       var(--c-white);
  --fg-muted: rgba(255, 254, 255, 0.62);
  --rule:     var(--c-hairline-d);
  --accent:   var(--c-green);   /* green sings on dark, and passes contrast */
}