/* =============================================================================
   VERENA RIZG — Design Tokens
   Phase 1 of the site rebuild. Every color, type size, spacing value, and
   layout constant derives from this file. Do not hard-code values elsewhere.
   Brief spec: Phase 1, Design system.
   ============================================================================= */

:root {
  /* ---------- Palette ----------
     Tuned April 24, 2026 to match current verenarizg.com warmth:
     gold-dark, cream, and muted updated to align with the live site. */
  --color-gold:      #C4965A;  /* Primary accents, CTAs, section rules */
  --color-gold-dark: #8B6A3E;  /* Hover state for primary buttons — matches current site */
  --color-cream:     #F5F0E8;  /* Brand cream (locked #F5F0E8) — matches Field Guide / design system */
  --color-dark:      #1A1A1A;  /* Body copy, primary text */
  --color-white:     #FFFFFF;  /* Card and page backgrounds */
  --color-muted:     #4A4A4A;  /* Meta text, captions, credentials — more editorial */

  /* ---------- Semantic aliases ---------- */
  --bg-page:       var(--color-white);
  --bg-panel:      var(--color-cream);
  --text-primary:  var(--color-dark);
  --text-muted:    var(--color-muted);
  --text-accent:   var(--color-gold);
  --rule-accent:   var(--color-gold);

  /* ---------- Typography ---------- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Century Gothic', sans-serif;

  --weight-display-regular: 500;
  --weight-display-bold:    600;
  --weight-subhead:         400;
  --weight-body:            400;
  --weight-cta:             500;

  /* Type scale — desktop (H2/H3 tuned April 24 to match current site's editorial weight) */
  --fs-h1-hero-desktop: 64px;
  --fs-h1-page-desktop: 48px;
  --fs-h2-desktop:      44px;
  --fs-h3-desktop:      32px;
  --fs-body-desktop:    18px;
  --fs-lead-desktop:    22px;
  --fs-cta:             14px;
  --fs-meta:            14px;

  /* Type scale — mobile */
  --fs-h1-hero-mobile:  40px;
  --fs-h1-page-mobile:  32px;
  --fs-h2-mobile:       32px;
  --fs-h3-mobile:       24px;
  --fs-body-mobile:     16px;

  /* Line heights */
  --lh-body:    1.7;
  --lh-display: 1.15;
  --lh-subhead: 1.3;

  /* Letter spacing */
  --tracking-cta: 0.05em;

  /* ---------- Layout ---------- */
  --max-content-width: 1200px;
  --max-prose-width:   720px;
  --max-quote-width:   620px;
  --max-lead-width:    680px;

  --section-padding-desktop: 64px;
  --section-padding-mobile:  40px;

  --grid-gutter-desktop: 24px;
  --grid-gutter-mobile:  16px;

  /* Sharp corners — production has zero border-radius on cards, buttons,
     inputs, images. Tokens pinned to 0 so any rule referencing them
     inherits the correct sharp-corner value. */
  --radius-card:   0;
  --radius-button: 0;

  /* ---------- Buttons ---------- */
  --btn-padding-y: 16px;
  --btn-padding-x: 32px;
  --btn-font-size: var(--fs-cta);
  --btn-weight:    var(--weight-cta);
  --btn-tracking:  var(--tracking-cta);

  /* ---------- Transitions ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:    150ms;
  --duration-medium:  220ms;
}

/* Mobile typography kicks in below 768px */
@media (max-width: 767.98px) {
  :root {
    --fs-h1-hero-desktop: var(--fs-h1-hero-mobile);
    --fs-h1-page-desktop: var(--fs-h1-page-mobile);
    --fs-h2-desktop:      var(--fs-h2-mobile);
    --fs-h3-desktop:      var(--fs-h3-mobile);
    --fs-body-desktop:    var(--fs-body-mobile);
    --fs-lead-desktop:    var(--fs-body-mobile);
    --section-padding-desktop: var(--section-padding-mobile);
    --grid-gutter-desktop:     var(--grid-gutter-mobile);
  }
}