/* ==========================================================================
   De Facto IAS — design tokens
   Shared by every page. Colours and fonts are the ones the previous site
   already uses; a few darker variants are added only where the original
   value fails WCAG AA for text (noted inline).
   ========================================================================== */

:root {
  /* ---- Brand colours (from the live site) ---- */
  --c-slate:      #4D5561;   /* headings, active menu item */
  --c-charcoal:   #2C3229;   /* card-title highlight, buttons, footer */
  --c-navy:       #324158;   /* resource-tile title highlight */
  --c-red:        #FF4040;   /* decorative accent only (fails AA for text) */
  --c-red-text:   #D92B2B;   /* AA-safe red: tag backgrounds, "See Here" links */
  --c-maroon:     #6E0F1F;   /* topper creative */
  --c-maroon-dark:#4A0A15;
  --c-gold:       #D9B45A;   /* topper creative accents */
  --c-gold-light: #F1E2B8;
  --c-blue:       #3D8FC6;   /* result cards (frame) */
  --c-blue-deep:  #2F7AB0;   /* result card caption band (AA with white text) */
  --c-link:       #3D9BE9;   /* brand link blue: hover / underline accent only */
  --c-link-text:  #1F6FB2;   /* AA-safe link blue for small text */

  /* ---- Neutrals ---- */
  --c-white:      #FFFFFF;
  --c-page:       #FFFFFF;
  --c-surface:    #F5F6F7;   /* light band behind some sections */
  --c-text:       #22262B;
  --c-text-muted: #5B6370;
  --c-line:       #E3E6EA;
  --c-focus:      #1F6FB2;

  /* ---- Typography ---- */
  --ff-display: "Spinnaker", "Trebuchet MS", Arial, sans-serif;  /* headings, menu, buttons */
  --ff-serif:   "Noto Serif", Georgia, "Times New Roman", serif; /* serif accents */
  --ff-body:    Arial, Helvetica, "Liberation Sans", sans-serif;

  --fs-sm:    0.875rem;  /* 14px  — meta, tags, top bar */
  --fs-base:  1rem;      /* 16px  — body on mobile */
  --fs-lead:  1.125rem;  /* 18px  — hero support copy */
  --fs-h3:    1.25rem;   /* 20px  — card / tile titles */
  --fs-h2:    1.625rem;  /* 26px  — section titles (mobile) */
  --fs-h1:    2rem;      /* 32px  — page title (mobile) */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  /* ---- 8px spacing scale ---- */
  --s-1: 0.5rem;   /*  8px */
  --s-2: 1rem;     /* 16px */
  --s-3: 1.5rem;   /* 24px */
  --s-4: 2rem;     /* 32px */
  --s-5: 2.5rem;   /* 40px */
  --s-6: 3rem;     /* 48px */
  --s-8: 4rem;     /* 64px */
  --s-10: 5rem;    /* 80px */

  /* ---- Layout ---- */
  --container-max: 1120px;   /* content width, gutters excluded */
  --gutter: var(--s-2);      /* 16px mobile; 24 tablet; 32 desktop (see base.css) */
  --section-pad: var(--s-6); /* vertical rhythm between sections */
  --tap-min: 44px;

  /* ---- Shape & elevation ---- */
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 10px;
  --shadow-card: 0 1px 2px rgba(20, 24, 28, 0.06), 0 6px 18px rgba(20, 24, 28, 0.10);
  --shadow-card-hover: 0 2px 4px rgba(20, 24, 28, 0.08), 0 12px 28px rgba(20, 24, 28, 0.14);
  --shadow-float: 0 6px 20px rgba(0, 0, 0, 0.25);

  --ease: 160ms ease-out;
}

@media (min-width: 640px) {
  :root {
    --gutter: var(--s-3);
    --section-pad: var(--s-8);
    --fs-h2: 1.875rem;  /* 30px */
    --fs-h1: 2.5rem;    /* 40px */
  }
}

@media (min-width: 960px) {
  :root {
    --gutter: var(--s-4);
    --section-pad: var(--s-10);
    --fs-h2: 2.125rem;  /* 34px */
    --fs-h1: 2.75rem;   /* 44px */
    --fs-lead: 1.1875rem;
  }
}