/* ============================================================
   I Want That Media Group
   Design tokens
   ------------------------------------------------------------
   Single point of change for colour, type and spacing. No other
   stylesheet hard codes either.

   The two brand colours are taken directly from the supplied
   artwork: the navy at #013B51 that the wordmark is set in, and
   the slate at #5A677E that the crest is drawn in.

   That pair is cold and carries no call to action colour, so a
   brass accent is added. It sits warm against the navy without
   competing with it, and it is the only saturated colour on a
   page, which means a button is unmistakably a button.
   ============================================================ */

:root {
  /* --- Brand, taken from the artwork --- */
  --c-navy:        #013B51;
  --c-navy-deep:   #012A3A;
  --c-navy-soft:   #0A5570;
  --c-slate:       #5A677E;
  --c-slate-light: #8C97A8;

  /* --- Added accent --- */
  --c-brass:       #C08A2E;
  --c-brass-deep:  #A0731F;
  --c-brass-soft:  #F6ECD9;

  /* --- Surfaces --- */
  --c-canvas:      #FFFFFF;
  --c-canvas-alt:  #F5F6F8;
  --c-canvas-sunk: #ECEEF1;
  --c-line:        #DEE2E8;
  --c-line-strong: #C3CAD4;

  /* --- Text --- */
  --c-ink:         #10222C;
  --c-ink-muted:   #5A677E;
  --c-ink-inverse: #FFFFFF;
  --c-ink-inverse-muted: rgba(255, 255, 255, 0.72);

  /* --- Signals --- */
  --c-positive:    #1F7A5C;
  --c-attention:   #B0872B;
  --c-critical:    #8C2F39;

  /* --- Typography ---
     The wordmark is a geometric sans, so Poppins carries the
     display sizes and keeps headings in the same voice as the
     logo. Inter takes the body text, where a neutral face with
     a large x height reads better at small sizes. */
  --font-display: "Poppins", "Century Gothic", "Segoe UI", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  /* Display sizes scale with the viewport so the hero holds its
     proportions from a phone to a large monitor. */
  --fs-hero: clamp(2.5rem, 7vw, 5.5rem);
  --fs-3xl:  clamp(1.875rem, 4vw, 3rem);

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight: 1.08;
  --lh-snug:  1.3;
  --lh-body:  1.65;
  --tracking-label: 0.14em;

  /* --- Space --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(1, 42, 58, 0.08);
  --shadow-md: 0 6px 20px rgba(1, 42, 58, 0.12);
  --shadow-lg: 0 20px 50px rgba(1, 42, 58, 0.22);

  --measure: 68ch;
  --container: 1200px;
  --header-height: 78px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tap-target: 44px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}