/* THAT GIRL HQ — Colour tokens */
/* Authoritative source: That Girl HQ / Design System v1.0 (June 2026). */

:root {
  /* Core surfaces */
  --bg: #F5F2EE;            /* app / page background */
  --bg2: #FFFFFF;           /* card / sheet surface */

  /* Ink / text */
  --ink: #211A14;           /* primary text, dark backgrounds */
  --ink-2: #4A4038;         /* body text */
  --muted: #8A7A6E;         /* labels / metadata */

  /* Accent — primary brand */
  --accent: #B0432A;        /* CTAs / highlights */
  --accent-light: #F5EDE8;  /* tinted accent backgrounds */

  /* Green — FINANCIAL / SAVINGS GOALS ONLY. Never decorative. */
  --green: #2E7D32;
  --green-light: #E8F4E8;

  /* Lines */
  --border: rgba(33, 26, 20, 0.12);   /* dividers / card outlines */
  --border-strong: #211A14;           /* 2px editorial section dividers */

  /* ---- Semantic aliases ---- */
  --surface-page: var(--bg);
  --surface-card: var(--bg2);
  --surface-dark: var(--ink);
  --text-primary: var(--ink);
  --text-body: var(--ink-2);
  --text-muted: var(--muted);
  --text-on-dark: #F5F2EE;
  --cta: var(--accent);
  --cta-tint: var(--accent-light);

  /* ---- Extended brand / photography mood palette ---- */
  /* Used for social content, imagery grading and editorial accents. */
  /* NOT part of the core UI token set. */
  --custard: #FFECA7;       /* social display type over dark imagery */
  --khaki-beige: #AEA693;
  --deep-mocha: #423328;
  --rusty-spice: #A74F2F;
  --camel: #AB8F71;
  --rosy-taupe: #C69F96;
  --cool-steel: #7D9695;
  --dusty-olive: #678063;
}