/* css/variables.css
   ============================================================
   VERDE LAW — Design token master file
   All colours, spacing, typography, and shadow values live here.
   To adapt for verde-legal.be: override --color-accent only.
   ============================================================ */

:root {

  /* ── Brand colours ─────────────────────────────────────── */
  --color-primary:      #12264B;   /* Navy  — VERDE wordmark, headings, nav bg */
  --color-accent:       #0087CA;   /* Sky blue — LAW, CTAs, links, V slash     */
  --color-crimson:      #971E23;   /* Reserved for verde-legal.be accent        */

  /* ── Supporting colours ────────────────────────────────── */
  --color-surface:      #F4F6F9;   /* Light grey — section backgrounds          */
  --color-white:        #FFFFFF;
  --color-body-text:    #2C2C2C;   /* Near-black — paragraphs                   */
  --color-muted:        #6B7A8D;   /* Grey — subtitles, meta, placeholders      */
  --color-border:       #DDE3EA;   /* Subtle dividers                           */

  /* ── Typography ────────────────────────────────────────── */
  /* Primary: Cormorant Garamond (elegant serif for headings) */
  /* Secondary: Source Sans 3 (clean humanist for body)       */
  /* Both available free via Google Fonts                     */
  --font-heading:       'Cormorant Garamond', 'Georgia', serif;
  --font-body:          'Source Sans 3', 'Trebuchet MS', sans-serif;
  --font-nav:           'Source Sans 3', 'Trebuchet MS', sans-serif;

  --font-size-base:     17px;
  --font-size-sm:       14px;
  --font-size-lg:       20px;
  --font-size-h1:       clamp(2rem, 4vw, 3.2rem);
  --font-size-h2:       clamp(1.5rem, 3vw, 2.2rem);
  --font-size-h3:       clamp(1.2rem, 2vw, 1.6rem);
  --line-height-base:   1.7;
  --line-height-heading:1.2;

  /* ── Spacing ───────────────────────────────────────────── */
  --space-xs:    0.5rem;
  --space-sm:    1rem;
  --space-md:    1.5rem;
  --space-lg:    2.5rem;
  --space-xl:    4rem;
  --space-xxl:   6rem;

  /* ── Layout ────────────────────────────────────────────── */
  --max-width:         1200px;
  --max-width-content:  780px;   /* Optimal reading width for blog/article */
  --header-height:       80px;
  --nav-height:          64px;

  /* ── Radius & shadow ───────────────────────────────────── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:   16px;

  --shadow-sm:  0 1px 3px rgba(18, 38, 75, 0.08);
  --shadow-md:  0 4px 16px rgba(18, 38, 75, 0.12);
  --shadow-lg:  0 8px 32px rgba(18, 38, 75, 0.16);

  /* ── Transitions ───────────────────────────────────────── */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;

  /* ── Z-index scale ─────────────────────────────────────── */
  --z-base:       1;
  --z-nav:      100;
  --z-overlay:  200;
  --z-modal:    300;
}