/*
 * GOTCHA: Never write the literal sequence asterisk-slash inside a CSS comment.
 * It closes the comment early and silently invalidates everything below it.
 * If you need to reference a CSS variable namespace, use a different separator
 * (e.g. "--green-X / --cream-X" with spaces, or "--green-*" without the slash).
 * This bit us once on 2026-05-17 — both files were silently broken in the browser.
 */

/* ============================================================
   NaturaPeak — Design tokens (shared: public site ↔ admin)
   Single source of truth for color, type, spacing, layout.
   Pure CSS variables. No framework. Namespace: color-, space-,
   font-, container- (does NOT collide with admin's legacy
   green / cream vars).
   ============================================================ */

:root {
  /* ── Color: text ── */
  --color-text-primary: #1d2a21;
  --color-text-secondary: #3c4a40;
  --color-text-muted: #6a7a6f;
  --color-text-inverse: #f5f0e8;

  /* ── Color: surfaces & borders ── */
  --color-bg: #fbfaf6;
  --color-bg-raised: #ffffff;
  --color-bg-sunken: #f1ede3;
  --color-border: #e3dccb;
  --color-border-strong: #cdc3ab;

  /* ── Color: brand ── */
  --color-brand: #2f6b45;
  --color-brand-deep: #1c4029;
  --color-link: #2f6b45;
  --color-link-hover: #1c4029;

  /* ── Color: semantic (calm, non-alarming) ── */
  --color-positive: #3f7d52;
  --color-positive-bg: rgba(63, 125, 82, 0.07);
  --color-positive-border: rgba(63, 125, 82, 0.30);

  --color-attention: #b07d2b;
  --color-attention-bg: rgba(176, 125, 43, 0.07);
  --color-attention-border: rgba(176, 125, 43, 0.32);

  --color-info: #2f6b8c;
  --color-info-bg: rgba(47, 107, 140, 0.07);
  --color-info-border: rgba(47, 107, 140, 0.28);

  --color-neutral-bg: rgba(106, 122, 111, 0.08);
  --color-neutral-border: rgba(106, 122, 111, 0.25);

  /* ── Typography ── */
  --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 0.95rem;
  --text-md: 1.05rem;
  --text-lg: 1.35rem;
  --text-xl: 1.7rem;
  --text-2xl: clamp(1.9rem, 3.2vw, 2.6rem);

  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* ── Spacing scale ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  /* ── Radius ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ── Layout widths ── */
  --container-body: 760px;   /* review reading column */
  --container-wide: 1100px;  /* header / footer / cross-content grid */
  --container-sidebar: 320px;
}