/* ============================================================
   IZEZA DESIGN TOKENS
   The system is written down here first, then referenced everywhere.
   Nothing in base.css or a template should use a raw hex or size.

   VALUES MARKED  [CONFIRM]  are placeholders derived from the one
   known brand colour (#228B22). Replace each with the exact value
   from the approved design file before Step 3 is called done.
   ============================================================ */

/* ---- Self-hosted fonts ----
   Download the woff2 files (weights listed) and drop them in
   ../fonts/ with these exact names. Sources: fonts.google.com
   (Sora, Space Mono) or google-webfonts-helper. Both are SIL OFL,
   free to self-host. Do NOT hotlink Google Fonts: self-hosting is
   the invariant (privacy + speed). */

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sora-400.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/sora-500.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/sora-600.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/sora-700.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/spacemono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/spacemono-700.woff2") format("woff2");
}

:root {
  /* ---- Colour ----
     Extracted directly from the approved design file
     (Izeza_Iron_Hill_-_Website_Pages__standalone.html). All confirmed,
     no placeholders remain. */
  --green-fill:   #228B22;   /* brand green, decorative fills, borders, hover     */
  --green-button: #1F821F;   /* AA-safe for white text at normal size (4.92:1); use
                                 wherever white/light text sits directly on a green
                                 fill (buttons, WhatsApp CTAs) - #228B22 itself only
                                 reaches 4.39:1 there, which fails AA for body-size text */
  --green-text:   #14601A;   /* headings, links, section eyebrows          */
  --green-deep:   #0E3A1C;   /* hero + dark-section background, footer     */
  --mint:         #D9F2D0;   /* pale green tiles, up-rate badge background */
  --mint-soft:    #EFF7ED;   /* softer info-band background                */

  /* Neutrals, straight from the design's grays. */
  --paper:        #FFFFFF;           /* page background            */
  --surface:      #FFFFFF;           /* cards on top of paper      */
  --card-tint:    #F7F5F2;           /* off-white card background  */
  --ink:          #111111;           /* primary text               */
  --ink-soft:     #6B6560;           /* secondary text              */
  --hairline:     #E4E0DA;           /* borders / dividers          */
  --on-dark:      #C8E3C6;           /* soft text on --green-deep   */
  --on-dark-strong: #FFFFFF;         /* headings on --green-deep    */

  /* Feedback (rate up/down, used from Day 2) */
  --up:      #14601A;
  --up-bg:   #D9F2D0;
  --down:    #8C2B2B;
  --down-bg: #F6E2E2;

  /* ---- Type ----
     Space Mono for headings and numerals (rate figures), Sora for body. */
  --font-head: "Space Mono", ui-monospace, "Cascadia Mono", monospace;
  --font-body: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Modular-ish scale. [CONFIRM] against the approved design's sizes. */
  /* Fluid scale: each step scales smoothly with viewport width between a
     mobile floor and the desktop ceiling, instead of jumping abruptly at
     a breakpoint. This is what actually makes headings feel considered on
     a real phone rather than just "the desktop size, slightly smaller". */
  --step--1: 0.833rem;   /* fine print, disclaimers   */
  --step-0:  1rem;       /* body                      */
  --step-1:  clamp(1.05rem, 0.94rem + 0.6vw, 1.25rem);   /* lead / small headings */
  --step-2:  clamp(1.3rem, 1.1rem + 1vw, 1.6rem);        /* section headings      */
  --step-3:  clamp(1.6rem, 1.25rem + 1.8vw, 2.25rem);    /* page titles           */
  --step-4:  clamp(2rem, 1.4rem + 3vw, 3rem);            /* hero                  */

  --leading-body: 1.6;
  --leading-head: 1.15;
  --weight-body: 400;
  --weight-strong: 600;
  --weight-head: 700;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Radius (max 3 values) ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container: 1120px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --mobilebar-h: 60px;   /* height reserved for the persistent mobile action bar */

  /* ---- Shadow: one light source, restrained ---- */
  --shadow-1: 0 1px 2px rgba(11, 61, 11, 0.06), 0 2px 8px rgba(11, 61, 11, 0.06);
}