/* ============================================================================
   R-Media — Design Tokens
   ----------------------------------------------------------------------------
   Single source of truth for the site's fluid type scale, flat sizes, colour
   palette, and layout constants. Loaded site-wide (coded Home page AND every
   Elementor page) so the two never drift.

   Values are authored directly from:
     - RESPONSIVE_TOKENS.md  (fluid clamp() scale, flat sizes, 16px gutter)
     - DESIGN_SYSTEM.md      (colour palette, font roles)

   Fluid values glide between the 390px mobile design and the 1720px desktop
   design; below 390 they hold at the min, above 1720 they hold at the max.
   Do NOT edit numbers here by hand — change them in RESPONSIVE_TOKENS.md and
   re-sync, so the docs stay authoritative.
   ========================================================================== */

:root {

  /* --- Fonts (roles from DESIGN_SYSTEM.md) --------------------------------
     The three Pangram Pangram faces are registered as Elementor Pro custom
     fonts and load site-wide via the Elementor kit CSS, which is present on
     this coded page through get_header()/get_footer(). We deliberately do NOT
     @font-face or self-host them here — that would fetch the same files twice.
     These variables just reference the exact family names as registered in
     Elementor (Custom Fonts). Note: the local mainpage-preview.html has no
     Elementor, so it shows the fallbacks — the real faces appear only on the
     live WordPress page. (Weights: only Regular/400 is uploaded for now.) */
  --font-display: "PPRightGrotesk", "Inter", system-ui, sans-serif; /* big titles */
  --font-italic:  "PPEditorialNew", Georgia, serif;                 /* italic accent words */
  --font-body:    "PPNeueMontreal", "Inter", system-ui, sans-serif; /* body, UI, nav, CTAs */

  /* --- Font sizes · fluid (390 → 1720) ----------------------------------- */
  --fs-display:   clamp(96px, 77.23px + 4.81vw, 160px); /* "What we do" giant band */
  --fs-h1:        clamp(48px, 43.31px + 1.20vw, 64px);  /* Hero / Mission / Process / Services headlines */
  --fs-h1-cta:    clamp(40px, 32.96px + 1.80vw, 64px);  /* CTA headline */
  --fs-h1-work:   clamp(32px, 22.62px + 2.41vw, 64px);  /* "Our Works" stretched title */
  --fs-h2:        clamp(32px, 27.31px + 1.20vw, 48px);  /* Service names, process step titles */
  --fs-quote:     clamp(24px, 21.65px + 0.60vw, 32px);  /* Testimonial quote body */
  --fs-cta-lg:    clamp(20px, 18.83px + 0.30vw, 24px);  /* Hero "Start a project" */
  --fs-learnmore: clamp(10px, 22.93px - 0.75vw, 20px);  /* Services "Learn More" (inverted: 20 mobile → 10 desktop) */

  /* --- Font sizes · flat (same at 390 and 1720) -------------------------- */
  --fs-work-title: 40px;  /* "Doritos" work-card title */
  --fs-cta:        20px;  /* Mission / Process / CTA action links */
  --fs-body:       16px;  /* Paragraphs, hero subtitle */
  --fs-caption:    14px;  /* Work-card description (desktop) */
  --fs-label:      12px;  /* Showreel caption, hero "View our work" */
  --fs-eyebrow:    10px;  /* Eyebrows, section numbers, counters */

  /* --- Layout ------------------------------------------------------------ */
  --pad-edge:    16px;    /* flat left/right gutter, both ends */
  --content-max: 1720px;  /* max layout width, centred; wider screens gain side margin */

  /* --- Colour · backgrounds (dark) --------------------------------------- */
  --bg-body:  #111113;   /* page background (near-black) */
  --zinc-950: #09090B;   /* darkest — image overlays, used at 40% opacity */
  --zinc-900: #18181B;   /* image placeholder bg */
  --zinc-800: #27272A;   /* card / placeholder bg, hairline rules */
  --zinc-700: #3F3F47;   /* placeholder bg */

  /* --- Colour · foreground / text ---------------------------------------- */
  --fg-solid:  #F4F4F5;  /* primary text (zinc-100) */
  --fg-soft:   #9F9FA9;  /* secondary / muted text (zinc-400) */
  --fg-subtle: #71717B;  /* subtle labels, footer */
  --fg-white:  #FFFFFF;  /* pure white — text over hero / work images */
  --zinc-50:   #FAFAFA;
  --stroke-element: #F4F4F5;  /* thin outlines (arrows) */

  /* --- Colour · accent --------------------------------------------------- */
  --red-500: #FB2C36;    /* CTAs, "Learn more", underlined links, active nav */

  /* --- Glass (Our Work card) --------------------------------------------- */
  --glass-bg:   rgba(255, 255, 255, 0.08);
  --glass-line: rgba(255, 255, 255, 0.08);
  --glass-blur: 16px;    /* backdrop-filter: blur(16px) */
}