:root{
  /* ── Canonical brand palette (nutalmond-design-system.md is source of truth) ── */
  --sage:#8FA487;            /* primary brand colour */
  --sage-dark:#5E7256;       /* hover, deep-green footer, headings on cream */
  --forest:#2F3E2C;          /* high-contrast headings */
  --cream:#F6F1E8;           /* primary page background */
  --almond:#E9DAC4;          /* card / secondary panel beige */
  --terracotta:#D98F72;      /* accent tint — badges, tags, highlights */
  --blush:#F0C9BC;           /* soft accent — hero bg, decorative shapes */
  --charcoal-navy:#2A2E33;   /* body copy on cream (never pure black) */
  --white:#FFFFFF;

  /* ── Ramps (all derived from the canonical hexes above) ── */
  --sage-200:#DCE3D8;--sage-300:#B9C7B2;--sage-400:var(--sage);--sage-500:#74896C;--sage-600:var(--sage-dark);--sage-700:#3F4E39;

  --cream-100:#FBF8F2;--cream-200:var(--cream);--cream-300:var(--almond);--cream-400:#D9C6A9;

  --blush-100:#FBEFEA;--blush-200:#F7E0D8;--blush-300:var(--blush);--blush-400:#E5AE9C;

  /* pink = the cooler half of the blush family (community bands) */
  --pink-200:#F7E4DE;--pink-300:#EDC9C0;--pink-400:#DBA898;

  /* terracotta ramp — 500 is the brand tint; 600/700 are the AA-safe fills for white text */
  --terracotta-400:#E7AF9A;--terracotta-500:var(--terracotta);--terracotta-600:#B06238;--terracotta-700:#96502C;
  /* legacy coral aliases fold into the terracotta family */
  --coral-400:var(--terracotta-400);--coral-500:var(--terracotta-600);--coral-600:var(--terracotta-700);

  --gold-300:#E3CFA0;--gold-400:#D3B778;--gold-500:#C6A05C;--gold-600:#A9853F;

  /* ink ramp — warm neutrals, never pure black */
  --navy-900:#1F2620;--navy-800:var(--forest);--navy-600:#4C5450;--navy-400:#7C837E;--navy-200:#D8D9D2;

  /* ── Semantic — surfaces ── */
  --surface-page:var(--cream);
  --surface-blush:var(--blush);
  --surface-pink:var(--pink-300);
  --surface-sage:var(--sage);
  --surface-almond:var(--almond);
  --surface-card:var(--cream-100);
  --surface-raised:var(--white);
  --surface-photo-bed:var(--almond);

  /* ── Semantic — text (body always ink-on-light, never pastel-on-pastel) ── */
  --text-heading:var(--forest);
  --text-body:var(--charcoal-navy);
  --text-muted:var(--navy-600);
  --text-accent:var(--terracotta-600);
  --text-eyebrow:var(--sage-dark);
  --text-on-sage:var(--white);
  --text-on-accent:var(--white);

  /* ── Semantic — interactive ── */
  --accent:var(--terracotta-600);
  --accent-hover:var(--terracotta-700);
  --accent-tint:var(--terracotta-500);
  --action-sage:var(--sage-dark);
  --action-sage-hover:var(--sage-700);
  --link:var(--sage-dark);
  --link-hover:var(--terracotta-700);

  /* ── Semantic — lines ── */
  --border-gold:var(--gold-500);
  --border-hairline:rgba(47,62,44,.14);
  --border-photo:var(--terracotta-500);
  --divider:var(--navy-200);

  /* Platform colours (order links — each platform's own brand colour) */
  --brand-gofood:#00AA13;
  --brand-tokopedia:#42B549;
  --brand-whatsapp:#25D366;
  --brand-tiktok:#010101;
  --brand-instagram:#C13584;
  --brand-youtube:#FF0000;
}