/* ==========================================================================
   01-VARIABLES.CSS
   Design tokens for ProjectBank.

   Source of truth: ProjectBank_Website_Style_Guide.docx
   Every token below marked "STYLE GUIDE" is a value taken directly from
   that document. Tokens marked "ENGINEERING DEFAULT" are values the guide
   did not specify (e.g. exact hover shades, radii, shadow depth) — sensible
   defaults have been chosen so the site is buildable, but these are the
   first place to look if the client wants to adjust the feel of the site.
   ========================================================================== */

:root {

  /* --- Brand colour palette (STYLE GUIDE) ------------------------------ */
  --color-navy:      #0F2747; /* Primary — nav, footer, headings */
  --color-blue:       #2F5D8C; /* Secondary — buttons, highlights */
  --color-copper:     #B87333; /* Accent — CTAs, icons */
  --color-bg:         #F7F7F5; /* Main page background (Warm White) */
  --color-section:    #EEF2F6; /* Alternating section background (Light Grey) */
  --color-text:       #2E3135; /* Body copy (Charcoal) */
  --color-border:     #D6DCE3; /* Card / divider borders (Soft Border) */
  --color-white:      #FFFFFF; /* Needed for white text on solid buttons */

  /* --- Hover / interactive shades (ENGINEERING DEFAULT) -----------------
     Style guide specifies "Hover: Darkened copper/navy" without exact
     values. This is calculated ~12% darker than copper, and is also the
     colour used for link/nav hover states generally — see 03-base.css
     and 05-components.css for why plain --color-copper fails contrast
     in those contexts. */
  --color-copper-hover: #9C5F27;

  /* --- Typography (STYLE GUIDE) ------------------------------------------ */
  --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-base: 18px; /* STYLE GUIDE: Body size 18px */

  /* Type scale (ENGINEERING DEFAULT: a modest, readable scale built off the
     18px base — the guide specifies body size only, not a full scale). */
  --font-size-sm:    0.889rem;  /* ~16px */
  --font-size-lg:    1.333rem;  /* ~24px */
  --font-size-xl:    1.777rem;  /* ~32px */
  --font-size-2xl:   2.369rem;  /* ~43px */
  --font-size-3xl:   2.65rem;   /* ~47.7px — reduced from 3.157rem (~57px)
                                    per client feedback that h1 headings
                                    read too large across the site */
  --line-height-heading: 1.2;
  --line-height-body:    1.6;

  /* --- Layout (STYLE GUIDE) ---------------------------------------------- */
  --container-width: 1200px;
  --container-padding-inline: 1.5rem;

  /* Vertical section spacing — STYLE GUIDE: "80-120px vertical spacing" */
  --space-section-sm: 80px;
  --space-section-lg: 120px;

  /* General spacing scale (ENGINEERING DEFAULT, 4px base unit, used for
     component-level spacing — gaps, padding — not full section rhythm). */
  --space-1: 0.25rem;  /* 4px  */
  --space-2: 0.5rem;   /* 8px  */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --space-7: 4rem;     /* 64px */

  /* --- Borders, radius (ENGINEERING DEFAULT) ------------------------------
     Style guide calls for "card-based content" but no card component
     exists in the current 5-page scope, so only the radius actually in
     use (buttons, skip link) is defined here. If a future page adds cards,
     add --radius-md/--shadow-card back in alongside that component rather
     than speculatively now. */
  --radius-sm: 4px;

  /* --- Motion (ENGINEERING DEFAULT) --------------------------------------
     Short, subtle transitions consistent with an institutional-grade feel.
     Respects prefers-reduced-motion — see 03-base.css. */
  --transition-fast: 150ms ease;

  /* --- Z-index scale (ENGINEERING DEFAULT) ------------------------------- */
  --z-nav: 100;
  --z-skip-link: 1000;
}