/* ============================================================================
   MONARCA — DESIGN TOKENS
   Single source of truth for colour, type, spacing, radius and layout.
   Mirrors the Figma variables (monarca/*, h1–h4, b1–b5, tag) and adds the
   semantic layer that the Figma file is missing.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     1. PRIMITIVES  — raw brand values. Do NOT reference these in components;
        use the semantic roles in section 2.
     ------------------------------------------------------------------------ */
  --monarca-green:          #13322b;
  --monarca-green-dark:     #0f2c26;
  --monarca-white:          #f0eee7;   /* warm cream / off-white            */
  --monarca-gray:           #e5e1d8;   /* muted stone                       */
  --monarca-brown:          #95866f;
  --monarca-brown-light:    #c5b9ac;
  --monarca-brown-lighter:  #e8e3de;
  --monarca-dark:           #363633;
  --monarca-ink:            #1f1f1f;   /* near-black for on-cream body text  */
  --monarca-scrim:          #141916;   /* neutral used in hero image scrim  */

  /* --------------------------------------------------------------------------
     2. SEMANTIC ROLES
     ------------------------------------------------------------------------ */

  /* Surfaces */
  --color-bg:                  var(--monarca-white);
  --color-surface:             #ffffff;
  --color-surface-sunken:      var(--monarca-gray);
  --color-surface-inverse:     var(--monarca-green);
  --color-surface-inverse-deep: var(--monarca-green-dark);
  --color-surface-warm:        var(--monarca-brown-lighter);  /* #e8e3de card panels */

  /* Text on light surfaces */
  --color-text-primary:     var(--monarca-ink);
  --color-text-secondary:   var(--monarca-dark);
  --color-text-muted:       #736451;   /* deepened brand brown — AA as text on cream (raw #95866f is 3:1) */
  --color-heading:          var(--monarca-green);

  /* Text on dark / inverse surfaces */
  --color-text-on-inverse:        var(--monarca-white);
  --color-text-on-inverse-muted:  rgba(240, 238, 231, 0.8);
  --color-text-on-inverse-subtle: rgba(240, 238, 231, 0.66);
  --color-accent-warm:            var(--monarca-brown-light);  /* warm accent text/icon on dark */

  /* Lines & borders */
  --color-border:            rgba(19, 50, 43, 0.14);
  --color-border-strong:     rgba(20, 25, 22, 0.2);
  --color-border-on-inverse: rgba(240, 238, 231, 0.2);
  --color-eyebrow-border:    rgba(240, 238, 231, 0.3);
  --color-hairline:          #d0d1d0;                      /* crisp card grid lines */

  /* Chips / tints */
  --color-chip-bg:              rgba(15, 44, 38, 0.75);    /* green-dark, translucent */
  --color-eyebrow-solid-bg:     #6f6151;                   /* deepened brand brown — AA with cream text */
  --color-icon-chip-on-inverse: rgba(197, 185, 172, 0.1);  /* brown-light tint */
  --color-icon-square-bg:       rgba(19, 50, 43, 0.06);    /* green tint behind a glyph */
  --color-surface-glass:        rgba(255, 255, 255, 0.08); /* subtle chip on dark */

  /* Interactive / accent */
  --color-accent:           var(--monarca-green);
  --color-accent-hover:     var(--monarca-green-dark);
  --color-on-accent:        var(--monarca-white);
  --color-focus-ring:       #7aa090;

  /* --------------------------------------------------------------------------
     3. TYPOGRAPHY
     Type scale tokens as size / line-height / tracking triplets.
     Tracking values are expressed in em (Figma stores them as %).
     ------------------------------------------------------------------------ */
  --font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans:  "Karla", "Helvetica Neue", Arial, sans-serif;

  --text-h1-size: 4.75rem;  --text-h1-lh: 1.08;  --text-h1-tr: -0.02em;   /* 76 */
  --text-h2-size: 3.5rem;   --text-h2-lh: 1.08;  --text-h2-tr: -0.02em;   /* 56 */
  --text-h3-size: 2rem;     --text-h3-lh: 1.05;  --text-h3-tr: -0.019em;  /* 32 */
  --text-h4-size: 1.25rem;  --text-h4-lh: 1.2;   --text-h4-tr: -0.02em;   /* 20 */

  --text-b1-size: 1.25rem;   --text-b1-lh: 1.6;  --text-b1-tr: -0.01em;   /* 20 */
  --text-b2-size: 1.125rem;  --text-b2-lh: 1.6;  --text-b2-tr: -0.01em;   /* 18 */
  --text-b3-size: 1rem;      --text-b3-lh: 1.6;  --text-b3-tr: -0.01em;   /* 16 — Figma had -4%, normalised to -1% to match the rest of the body scale */
  --text-b4-size: 0.875rem;  --text-b4-lh: 1.6;  --text-b4-tr: -0.01em;   /* 14 */
  --text-b5-size: 0.75rem;   --text-b5-lh: 1.6;  --text-b5-tr: -0.01em;   /* 12 */

  /* "tag" — eyebrow / kicker / button label */
  --text-eyebrow-size: 0.75rem;
  --text-eyebrow-lh:   1.6;
  --text-eyebrow-tr:   0.16em;   /* +16% wide tracking, always uppercase */

  /* --------------------------------------------------------------------------
     4. SPACING  — 4px base scale
     ------------------------------------------------------------------------ */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-7:  1.75rem;   /* 28 */
  --space-8:  2rem;      /* 32 */
  --space-9:  2.25rem;   /* 36 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-15: 3.75rem;   /* 60 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */

  /* --------------------------------------------------------------------------
     5. RADIUS  — the brand is sharp / editorial; corners stay square
     ------------------------------------------------------------------------ */
  --radius-none: 0;
  --radius-sm:   2px;

  /* --------------------------------------------------------------------------
     6. LAYOUT
     ------------------------------------------------------------------------ */
  --container-max: 1216px;   /* content width  (1440 − 2 × 112)              */
  --gutter:        7rem;     /* 112px — desktop side margin                  */
  --section-pad-y: var(--space-24);   /* 96px — vertical breathing room     */

  /* --------------------------------------------------------------------------
     7. MOTION & ELEVATION
     ------------------------------------------------------------------------ */
  --transition-fast: 160ms ease;
  --transition-med:  260ms ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-header: 0 18px 48px -24px rgba(15, 44, 38, 0.45);

  /* --------------------------------------------------------------------------
     8. BREAKPOINTS (reference only — used in @media queries across the CSS)
        mobile   ≤ 640px      (design target 375–430)
        tablet   641–1024px   (design target 768–834)
        desktop  ≥ 1025px     (design target 1440)
     ------------------------------------------------------------------------ */
}

/* Responsive side gutter -------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --gutter: 2.5rem;                 /* 40px */
    --section-pad-y: var(--space-20); /* 80px */
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 1.25rem;               /* 20px */
    --section-pad-y: var(--space-16); /* 64px */
  }
}