/* ==========================================================================
   WIZDOM Circles - Design Tokens
   Drop this file in as-is (e.g. /assets/css/tokens.css) and load it before
   any other stylesheet. Every other stylesheet should reference these
   variables instead of hard-coded hex values or font names.
   ========================================================================== */

:root {
  /* Color: core palette */
  --color-deep-green: #2E5E3A;   /* primary - buttons, headlines, icon strokes, nav */
  --color-sage-green: #7A8F6B;   /* accent - badges, dividers, decorative circles. Not for text on light backgrounds (see README, Accessibility). */
  --color-warm-sand: #EADCC8;    /* warm section background (alternates with soft peach) */
  --color-soft-peach: #F6E9DD;   /* light section background, card fill */
  --color-charcoal: #1A1A1A;     /* body copy, high-contrast text */
  --color-white: #FFFFFF;

  /* Color: semantic aliases (use these in components) */
  --color-surface-page: var(--color-soft-peach);
  --color-surface-alt: var(--color-warm-sand);
  --color-surface-dark: var(--color-deep-green);
  --color-text-primary: var(--color-charcoal);
  --color-text-on-dark: var(--color-soft-peach);
  --color-text-link: var(--color-deep-green);
  --color-border-subtle: color-mix(in srgb, var(--color-charcoal) 12%, transparent);
  --color-accent: var(--color-sage-green);

  /* Typography: families (loaded from Google Fonts, see README §3) */
  --font-headline: "Playfair Display", "Georgia", serif;
  --font-body: "Inter", "DM Sans", -apple-system, sans-serif;
  --font-nav: "Montserrat", -apple-system, sans-serif;
  --font-script: "Caveat", cursive; /* decorative accents only - see README section 7 */
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* eyebrows, labels, dates, the "receipts" voice. Added 2026-10-15: already in use on 91 pages. */

  /* Typography: scale (fluid-friendly base sizes, desktop) */
  --text-display: 700 56px/1.1 var(--font-headline);
  --text-h1: 700 40px/1.15 var(--font-headline);
  --text-h2: 700 32px/1.2 var(--font-headline);
  --text-h3: 600 24px/1.3 var(--font-headline);
  --text-body-lg: 400 18px/1.6 var(--font-body);
  --text-body: 400 16px/1.6 var(--font-body);
  --text-small: 400 14px/1.5 var(--font-body);
  --text-nav: 600 13px/1 var(--font-nav);       /* pair with letter-spacing below */
  --tracking-nav: 0.08em;

  /* Spacing scale (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* Radius scale */
  --radius-sm: 8px;      /* form fields, small chips */
  --radius-md: 16px;     /* cards */
  --radius-lg: 24px;     /* image / video frames */
  --radius-pill: 999px;  /* buttons, icon badges */

  /* Layout */
  --content-max-width: 1280px;
  --section-padding-y: 96px;
  --section-padding-y-mobile: 56px;

  /* Shadow (used sparingly - this brand is flat/warm, not heavily shadowed) */
  --shadow-card: 0 1px 2px rgba(26, 26, 26, 0.04), 0 8px 24px rgba(26, 26, 26, 0.06);
}

/* Dark / reversed surfaces (footer, dark sections) flip the text pairing */
[data-surface="dark"] {
  --color-text-primary: var(--color-soft-peach);
  --color-text-link: var(--color-soft-peach);
}