/* =============================================
   STUDIO ROSE MOON - DESIGN TOKENS
   ----------------------------------------------
   Canonical mirror of the Studio Rose Moon Design
   System maintained at claude.ai/design.

   DO NOT edit values in this file directly.
   Source of truth lives in claude.ai/design - change
   tokens there and re-sync. See the /sync-design-tokens
   skill, or follow reference_design_system.md.

   Last sync: 2026-05-16 (re-palette from rose-on-terracotta photo).
   ============================================= */

/* WOFF2 = Latin-subset, ~90% kleiner dan de TTF (2.3 MB -> ~260 KB totaal).
   TTF blijft als fallback voor heel oude browsers. Bij een design-system
   re-sync: woff2-bronnen behouden (regenereer met pyftsubset, zie
   project-memory). */
@font-face {
  font-family: 'Gelasio';
  src: url('fonts/Gelasio-Regular.woff2') format('woff2'),
       url('fonts/Gelasio-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gelasio';
  src: url('fonts/Gelasio-Italic.woff2') format('woff2'),
       url('fonts/Gelasio-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gelasio';
  src: url('fonts/Gelasio-Bold.woff2') format('woff2'),
       url('fonts/Gelasio-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gelasio';
  src: url('fonts/Gelasio-BoldItalic.woff2') format('woff2'),
       url('fonts/Gelasio-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Variable font, weight 300-700 covers light/regular/medium/semibold/bold */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-VF.woff2') format('woff2-variations'),
       url('fonts/CormorantGaramond-VF.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic-VF.woff2') format('woff2-variations'),
       url('fonts/CormorantGaramond-Italic-VF.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* Cormorant Garamond draws the hyphen as a slanted calligraphic stroke (verified
   by canvas-pixel slope test: -9.5px slope in regular, -11.5px in italic). Use
   Gelasio's horizontal hyphen instead, scoped to dash glyphs only via
   unicode-range. Browser falls back to Cormorant for every other character. */
@font-face {
  font-family: 'StraightDash';
  src: url('fonts/Gelasio-Regular.woff2') format('woff2'),
       url('fonts/Gelasio-Regular.ttf') format('truetype');
  unicode-range: U+002D, U+2010, U+2013, U+2014;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'StraightDash';
  src: url('fonts/Gelasio-Regular.woff2') format('woff2'),
       url('fonts/Gelasio-Regular.ttf') format('truetype');
  unicode-range: U+002D, U+2010, U+2013, U+2014;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- BRAND PALETTE (warm burgundy + cream) ---- */
  --srm-rose:       #82412a;  /* accent / primary navbar / dots — warm burgundy */
  --srm-rose-deep:  #5e2e1c;  /* hover / pressed state of --srm-rose */
  --srm-warm-brown: #7a4d33;  /* body accents, borders, muted type */
  --srm-dark-brown: #34200f;  /* primary text on blush, dark sections */
  --srm-blush:      #ead7c1;  /* page background — warm sandy cream */
  --srm-blush-soft: #f3e5d3;  /* lighter cream for cards / inset surfaces */
  --srm-white:      #ffffff;

  /* ---- SEMANTIC SURFACES ---- */
  --bg-page:        var(--srm-blush);
  --bg-inverse:     var(--srm-dark-brown);
  --bg-warm:        var(--srm-warm-brown);
  --bg-primary:     var(--srm-rose);                  /* nav, footer, accents */
  --bg-soft:        rgba(122, 77, 51, 0.08);          /* card surface on blush */
  --bg-soft-hover:  rgba(122, 77, 51, 0.15);
  --bg-soft-inverse:        rgba(234, 215, 193, 0.08);
  --bg-soft-inverse-hover:  rgba(234, 215, 193, 0.15);

  /* ---- SEMANTIC TEXT ---- */
  --fg1:              var(--srm-dark-brown);      /* primary ink on blush */
  --fg2:              var(--srm-warm-brown);      /* secondary / labels */
  --fg-muted:         rgba(52, 32, 15, 0.70);     /* disclaimers, hints */
  --fg-accent:        var(--srm-rose);            /* link accent */
  --fg-on-dark-1:     var(--srm-blush);           /* primary on dark */
  --fg-on-dark-2:     rgba(234, 215, 193, 0.85);  /* body on dark */
  --fg-on-dark-3:     rgba(234, 215, 193, 0.6);   /* labels on dark */
  --fg-on-dark-muted: rgba(234, 215, 193, 0.60);

  /* ---- BORDERS / RULES ---- */
  --rule-on-light:        rgba(122, 77, 51, 0.15);
  --rule-on-light-strong: rgba(122, 77, 51, 0.35);
  --rule-on-dark:         rgba(234, 215, 193, 0.15);
  --rule-on-dark-strong:  rgba(234, 215, 193, 0.4);

  /* ---- TYPOGRAPHY ---- */
  --font-serif:   'Gelasio', Georgia, 'Times New Roman', serif;
  --font-body:    var(--font-serif);
  --font-heading: 'StraightDash', 'Cormorant Garamond', 'Gelasio', Georgia, 'Times New Roman', serif;

  /* Type scale (editorial, generous line-height) */
  --fs-eyebrow:  0.78rem;   /* ALL-CAPS section tags        */
  --fs-label:    0.85rem;   /* form labels, tiny ALL-CAPS   */
  --fs-meta:     0.88rem;   /* footer, metadata             */
  --fs-ui:       0.9rem;    /* buttons, nav links           */
  --fs-body-sm:  0.95rem;   /* card body, modal body        */
  --fs-body:     1.02rem;   /* long-form body               */
  --fs-intro:    1.15rem;   /* italic section intro         */
  --fs-h3:       1.2rem;    /* subsection heads             */
  --fs-h1:       1.55rem;   /* page tagline / intro.tagline */

  /* Letter-spacing */
  --ls-eyebrow:  0.12em;
  --ls-nav:      0.08em;
  --ls-ui:       0.04em;
  --ls-loose:    0.06em;
  --ls-tight:    0.02em;

  /* Line-heights */
  --lh-tight:    1.4;
  --lh-base:     1.6;
  --lh-body:     1.75;
  --lh-long:     1.85;

  /* ---- SHAPE ---- */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-pill: 999px;     /* chips, toasts ONLY */

  /* ---- SPACING SCALE ---- */
  --space-1:     4px;
  --space-2:     8px;
  --space-3:     12px;
  --space-4:     16px;
  --space-5:     20px;
  --space-6:     24px;
  --space-7:     28px;
  --space-8:     32px;
  --space-9:     40px;
  --space-10:    48px;
  --space-12:    56px;
  --space-14:    64px;
  --space-16:    72px;

  /* ---- LAYOUT ---- */
  --nav-height:         64px;
  --nav-utility-height: 36px;
  --container-reading:  720px;   /* .sectie-inner          */
  --container-section:  860px;   /* section default        */

  /* ---- MOTION ---- */
  --transition:  0.2s ease;

  /* ---- ELEVATION (used sparingly - never on brand surfaces) ---- */
  --shadow-toast:  0 10px 30px rgba(0, 0, 0, 0.20);
  --shadow-modal:  0 10px 40px rgba(52, 32, 15, 0.25);
  --shadow-cookie: 0 10px 40px rgba(0, 0, 0, 0.25);

  /* ---- LEGACY ALIASES (kept until style.css migrates to --srm-* names) ---- */
  --warm-brown: var(--srm-warm-brown);
  --blush:      var(--srm-blush);
  --dark-brown: var(--srm-dark-brown);
  --rose:       var(--srm-rose);
  --rose-deep:  var(--srm-rose-deep);
  --white:      var(--srm-white);
}