/* ============================================================
   VARIABLES.CSS — Design Tokens & Brand Configuration
   ============================================================
   PURPOSE:
     Central source of truth for all colors, spacing, fonts,
     and other reusable design values.

   SAFE TO EDIT:
     - Color values to match updated brand guidelines
     - Font sizes if your brand typography changes
     - Border radius if the design direction changes

   DO NOT MODIFY:
     - The CSS variable names themselves (--ink, --gold, etc.)
       because they are referenced throughout ALL other files.
       Renaming one here breaks every file that uses it.

   HOW TO USE:
     Anywhere in CSS, write var(--token-name) instead of a
     hard-coded value. Example: color: var(--ink);
============================================================ */

:root {

  /* ── Multi-Prêts Official Brand Colors ──────────────────
     Source: Multi-Prêts brand guidelines
     Do NOT change these without approval from brand team.
  ──────────────────────────────────────────────────────── */

  /* Primary dark — Pantone 539 navy */
  --ink:      #00263A;

  /* Mid navy-grey — secondary text, subdued UI */
  --stone:    #4C6B7A;

  /* Light navy-grey — muted / placeholder text */
  --mist:     #8AAABB;

  /* Very light blue-white — page and card backgrounds */
  --paper:    #F0F4F6;

  /* Pure white */
  --white:    #FFFFFF;

  /* Primary accent green — Pantone 362 */
  --gold:     #4C9C2E;

  /* Secondary accent green — Pantone 368 (brighter) */
  --gold-lt:  #76BC21;

  /* Light green tint — used for highlight backgrounds */
  --gold-bg:  #EBF5DC;

  /* Border color — Pantone 545 light blue */
  --line:     #C5D9E7;

  /* Aliases — kept for clarity in certain contexts */
  --green:    #4C9C2E;
  --green-lt: #EBF5DC;


  /* ── Spacing & Shape ─────────────────────────────────────
     Safe to adjust --radius if you want rounder/sharper UI.
  ──────────────────────────────────────────────────────── */

  /* Button and input corner radius */
  --radius: 4px;


  /* ── Typography ──────────────────────────────────────────
     Font families are loaded via Google Fonts in index.html.
     Change font-family values here if you switch typefaces.
  ──────────────────────────────────────────────────────── */

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Inter', system-ui, sans-serif;


  /* ── Layout ──────────────────────────────────────────────
     --gutter controls side padding on all main sections.
     Increase to 8vw for more breathing room on wide screens.
  ──────────────────────────────────────────────────────── */

  --gutter: 5vw;

  /* ── Mobile Sticky Bar Height (JS-synced) ─────────────────
     Fallback value only — matches the bar's typical single-line
     rendered height. navigation.js measures the bar's REAL height
     with a ResizeObserver (it varies with FR/EN text length, text
     wrapping on narrow screens, and font-size/zoom settings) and
     overwrites this at runtime so the footer always reserves
     exactly enough space. Do not rely on this number alone. */
  --sticky-bar-height: 80px;
}