/* ============================================================
   Design Tokens — Nimrod Sound
   All colours, fonts, spacing, and sizing as CSS custom
   properties. Edit values here; the rest of the site updates.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     Colours
     ---------------------------------------------------------- */

  /* Brand palette */
  --color-overdrive:       #E57E38;   /* Primary orange — CTAs, Services hero, team headings */
  --color-deep-slate:      #3B4A57;   /* Dark blue-grey — About/WHO WE ARE/Composers sections */
  --color-tube-streamer:   #6AD598;   /* Mint teal — Highlights, Work hero, Filmmakers section (confirm hex) */
  --color-tape:            #251407;   /* Dark brown — bio card overlay background */
  --color-cream:           #F5EADE;   /* Off-white — default page/section background (confirm hex) */
  --color-undergrowth:     #415751;   /* Dark grey-green — Who We Are section bg */
  --color-diffuser:        #C7B7A8;   /* Warm greige — supporting palette colour */
  --color-pith:            #F4CAED;   /* Supporting light pink (confirm hex) */

  /* Neutrals */
  --color-black:           #111111;   /* Footer background, button variant */
  --color-white:           #FFFFFF;
  --color-black-pure:      #000000;   /* Text on orange backgrounds */

  /* Tints (80% opacity equivalents as flat hex) */
  --color-overdrive-80:    #EA985F;
  --color-deep-slate-80:   #626E78;
  --color-tube-streamer-80:#88D9AC;

  /* ----------------------------------------------------------
     Typography
     ---------------------------------------------------------- */

  --font-display: 'Funnel Display', sans-serif;   /* Section headings, hero titles */
  --font-body:    'Figtree', sans-serif;           /* Body, nav, buttons, labels */

  /* Font weights */
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* ----------------------------------------------------------
     Spacing
     ---------------------------------------------------------- */

  /* Horizontal page gutter — scales from 20px (mobile) to 56px (desktop) */
  --space-page-x:   clamp(1.25rem, 4vw, 3.5rem);

  /* Vertical section padding */
  --space-section-y: clamp(3rem, 7vw, 6rem);

  /* General spacing scale */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;

  /* ----------------------------------------------------------
     Layout
     ---------------------------------------------------------- */

  --nav-height:      64px;
  --max-width:       1400px;

  /* ----------------------------------------------------------
     Z-index layers
     ---------------------------------------------------------- */

  --z-base:     1;
  --z-nav:      100;
  --z-overlay:  200;

}