/* ============================================================
   Conmoji Design Tokens — the single source of truth.
   Load this FIRST, before page CSS, so page-level :root blocks
   can still override where a page intentionally differs.
   Docs: /DESIGN.md
   ============================================================ */

:root {
  /* ---- Neutrals / surfaces ---- */
  --paper: #efece4;        /* page background (warm cream) */
  --paper-soft: #f5f2ea;   /* raised sections */
  --card: #faf8f3;         /* card surface */
  --ink: #292e2a;          /* primary text */
  --ink-2: #2c322d;        /* secondary text */
  --ink-mute: #5a6058;     /* muted text / captions */
  --line: #d9d4c5;         /* borders */
  --line-soft: #e6e1d2;    /* subtle borders */

  /* ---- Brand green (primary) ---- */
  --green: #77ac77;        /* brand green */
  --green-deep: #5a8a5a;   /* hover / stronger */
  --green-darker: #3d6c3e; /* text on light, focus ring */
  --green-soft: #dbe7d4;   /* soft fill */
  --green-tint: #cee0c8;   /* tint fill */

  /* ---- Accent families ---- */
  --butter: #fcdd80;   --butter-soft: #fdf2c8;   /* yellow (chips, highlights) */
  --coral: #e99d82;    --coral-soft: #fbe1d6;    /* warm accent (see DESIGN.md: coral conflict) */
  --sky: #a9d6e5;      --sky-soft: #e2f0f5;      /* blue accent */
  --blush: #f5bde2;    --blush-soft: #fde4f4;    /* pink accent */
  --earth: #a6866d;    --earth-soft: #e7d9cc;    /* brown accent */
  --lavender: #7d7eba; --lavender-mid: #9b9cd0; --lavender-soft: #dadbef; /* purple accent */

  /* ---- Radius ---- */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* ---- Elevation / focus ---- */
  --shadow-soft: 0 1px 0 rgba(31,42,35,.04), 0 6px 18px -8px rgba(31,42,35,.12);
  --shadow-card: 0 1px 0 rgba(31,42,35,.04), 0 14px 30px -16px rgba(31,42,35,.18);
  --focus: 0 0 0 3px #fff, 0 0 0 6px var(--green-darker);

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-y: clamp(80px, 8vw, 140px);

  /* ---- Type scale (Nunito) ---- */
  --font-sans: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-lg: 1.125rem;   /* 18 */
  --text-xl: 1.25rem;    /* 20 */
  --text-2xl: 1.5rem;    /* 24 */
  --text-3xl: clamp(1.75rem, 3vw, 2.25rem);   /* 28 → 36 */
  --text-4xl: clamp(2rem, 4vw, 3.25rem);      /* 32 → 52 (section headings) */
  --text-5xl: clamp(2.5rem, 6vw, 4.5rem);     /* 40 → 72 (hero) */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  --fw-medium: 500;    /* body */
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;     /* display headings */

  /* ---- Layout ---- */
  --container: 1440px;
  --hf-container: 1440px;
}