/* ==========================================================================
   BRAIN OF A MOTHER — DESIGN TOKENS
   A calm, editorial system built for a Scandinavian motherhood brand.
   ========================================================================== */

:root {

  /* ---------- Color: off-white, beige, black + a hint of red ---------- */
  --color-cream:        #F7F4EC;   /* primary background — off-white */
  --color-cream-deep:    #F0EADB;   /* alternate section background */
  --color-linen:          #E9E0CC;   /* card / panel fill — beige */
  --color-taupe:           #D8CCAE;   /* mid-tone, borders, dividers — beige */
  --color-taupe-soft:      #E3D9C0;   /* soft border */
  --color-olive:           #1A1A1A;   /* secondary accent, repurposed to near-black for UI states */
  --color-olive-deep:      #000000;   /* hover / deepest black */
  --color-clay:            #8A2A22;   /* accent — hint of red, used sparingly */
  --color-ink:             #1A1712;   /* primary text — near black */
  --color-ink-soft:        #4A453B;   /* secondary text */
  --color-ink-faint:       #8A8270;   /* tertiary text / captions */
  --color-white:           #FFFEFB;   /* pure card white, rare use */
  --color-line:            rgba(26, 23, 18, 0.12);
  --color-line-strong:     rgba(26, 23, 18, 0.22);

  /* ---------- Typography ---------- */
  --font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Inter", sans-serif; /* used for eyebrow/label tracking, not literal monospace */

  --fs-display-xl: clamp(2.75rem, 5vw + 1rem, 5.5rem);
  --fs-display-l:  clamp(2.25rem, 3.6vw + 1rem, 3.75rem);
  --fs-display-m:  clamp(1.75rem, 2.4vw + 1rem, 2.75rem);
  --fs-display-s:  clamp(1.4rem, 1.4vw + 1rem, 1.85rem);
  --fs-body-l:     clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
  --fs-body-m:     1rem;
  --fs-body-s:     0.9rem;
  --fs-label:      0.78rem;

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.7;

  --tracking-label: 0.14em;
  --tracking-wide:  0.04em;

  /* ---------- Spacing scale ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1.25rem;
  --space-m:   2rem;
  --space-l:   3.25rem;
  --space-xl:  5.5rem;
  --space-2xl: 8.5rem;
  --space-3xl: 12rem;

  /* ---------- Layout ---------- */
  --container-max: 1320px;
  --container-narrow: 760px;
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --radius-s: 2px;
  --radius-m: 3px;
  --border-hairline: 1px solid var(--color-line);

  /* ---------- Motion ---------- */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 220ms;
  --dur-med: 520ms;
  --dur-slow: 900ms;

  /* ---------- Shadow (used sparingly) ---------- */
  --shadow-soft: 0 1px 2px rgba(44,42,36,0.04), 0 12px 32px -16px rgba(44,42,36,0.14);
  --shadow-lift: 0 24px 60px -24px rgba(44,42,36,0.24);
}