/* ==========================================================================
   LUCY COLSON — COLOR TOKENS
   Autumn-muted, quiet-luxury palette. Target composition across any layout:
   ~55% warm ivory, ~25% dark olive, ~10% moss, ~10% bronze, ~10% oatmeal.
   Oatmeal is specifically the SECOND background tone — reach for it so
   layouts can breathe with tonal blocking instead of borders, not as a
   general-purpose fill.

   TEXT COLOR RULE: all text is either pure ivory (#FCFBF7) or pure black
   (#000000) — never a tinted green. Always pick whichever of the two has
   the strongest contrast against its background. See --text-on-light /
   --text-on-dark below.

   BRONZE RULE: bronze is a LINE color only — thin rules, dashed strokes,
   arrows, underlines, drop-cap accents. It is never a button fill and
   never sits behind text as a background (badge/pill/chip fills etc.).

   BUTTON COLOR RULE: filled buttons use a core palette color chosen per
   theme (never bronze) — see --button-primary-bg/-fg per theme below.

   THEMES: three core themes are defined via [data-theme="light|neutral|dark"]
   — see the bottom of this file. Wrap any container in
   `data-theme="neutral"` or `data-theme="dark"` to reflow its surface,
   text, border and button tokens consistently.
   ========================================================================== */

:root {
  /* ---- Base palette -------------------------------------------------- */
  --color-dark-olive: #4A4A2E;   /* anchor: headlines, logo, body text on light grounds */
  --color-moss: #6B7345;         /* mid-tone: accents, pull quotes, rules, dividers */
  --color-light-olive: #ABA57C;  /* tonal backgrounds, secondary text, subtle fills (warm lean) */
  --color-light-olive-cool: #A8A878; /* cooler alt of the above, for variety in large fills */

  --color-ivory: #FCFBF7;        /* paper — the base ground, never pure white */
  --color-oatmeal: #E4DCC9;      /* second ground for tonal blocking instead of borders */

  --color-bronze: #B08D57;       /* line-only accent — rules, dashes, arrows, underlines */

  /* Neutral scaffolding derived from the anchor, for states/disabled/hairlines */
  --color-olive-90: #35351f;
  --color-olive-60: rgba(74, 74, 46, 0.6);
  --color-olive-35: rgba(74, 74, 46, 0.35);
  --color-olive-15: rgba(74, 74, 46, 0.15);
  --color-olive-08: rgba(74, 74, 46, 0.08);

  /* ---- Surface aliases (theme-independent; card fills etc. still read
     from the theme block below for surface-page/tonal/card/border/divider) */
  --surface-inverse: var(--color-dark-olive);

  /* ---- Text color rule --------------------------------------------------
     Text is ALWAYS pure ivory or pure black — never a tinted green. Pick
     whichever of the two has the strongest contrast against the ground it
     sits on. Hierarchy (primary/secondary/caption) comes from size, weight
     and tracking, never from a third text color. */
  --text-on-light: #000000;  /* on ivory, oatmeal, light olive grounds */
  --text-on-dark: #FCFBF7;   /* on dark olive, moss grounds */

  --text-on-inverse: var(--text-on-dark); /* content on dark-olive/moss grounds */

  --accent: var(--color-bronze); /* lines only — see BRONZE RULE above */

  --color-dark-olive-hover: #3d3d26; /* dark olive, deepened ~12% for hover */
  --color-dark-olive-press: #302f1e; /* dark olive, deepened ~25% for press */
  --color-moss-hover: #5c6339;       /* moss, deepened ~12% for hover */
  --color-moss-press: #4d5330;       /* moss, deepened ~25% for press */
  --color-ivory-hover: #f0ebe0;      /* ivory, deepened toward oatmeal for hover */
  --color-ivory-press: var(--color-oatmeal); /* ivory, deepened to oatmeal for press */

  --focus-ring: rgba(176, 141, 87, 0.45); /* bronze at low opacity — focus rings are lines, not fills */

  --state-disabled-fg: var(--color-olive-35);
  --state-disabled-bg: var(--color-olive-08);
}

/* ==========================================================================
   THEMES — Light / Neutral / Dark
   Each redefines the semantic surface/text/border/button aliases only;
   component and token names never change, so any component works
   unmodified inside any theme. Apply with `data-theme="light|neutral|dark"`
   on a container (defaults to light if omitted).
   ========================================================================== */

:root,
[data-theme="light"] {
  --surface-page: var(--color-ivory);
  --surface-tonal: var(--color-oatmeal);
  --surface-card: var(--color-ivory);
  --surface-card-tonal: var(--color-oatmeal);
  --text-primary: var(--text-on-light);
  --text-secondary: var(--text-on-light);
  --border-hairline: var(--color-olive-15);
  --border-hairline-strong: var(--color-olive-35);
  --divider: var(--color-moss);
  --state-hover-wash: rgba(0, 0, 0, 0.06);
  --state-press-wash: rgba(0, 0, 0, 0.12);

  /* Buttons: dark olive fill, ivory text — the light theme's solid action color. */
  --button-primary-bg: var(--color-dark-olive);
  --button-primary-fg: #FCFBF7;
  --button-primary-bg-hover: var(--color-dark-olive-hover);
  --button-primary-bg-press: var(--color-dark-olive-press);
}

/* Neutral — the middle ground: light olive as the base page tone (not just
   a tonal accent), with oatmeal/ivory used for contrast blocks. Visibly
   distinct from both Light (ivory base) and Dark (olive base). */
[data-theme="neutral"] {
  --surface-page: var(--color-light-olive);
  --surface-tonal: var(--color-oatmeal);
  --surface-card: var(--color-ivory);
  --surface-card-tonal: var(--color-oatmeal);
  --text-primary: var(--text-on-light);
  --text-secondary: var(--text-on-light);
  --border-hairline: var(--color-olive-15);
  --border-hairline-strong: var(--color-olive-35);
  --divider: var(--color-moss);
  --state-hover-wash: rgba(0, 0, 0, 0.06);
  --state-press-wash: rgba(0, 0, 0, 0.12);

  /* Buttons: moss fill, ivory text — the remaining core green, distinct
     from the light theme's dark-olive buttons. */
  --button-primary-bg: var(--color-moss);
  --button-primary-fg: #FCFBF7;
  --button-primary-bg-hover: var(--color-moss-hover);
  --button-primary-bg-press: var(--color-moss-press);
}

[data-theme="dark"] {
  --surface-page: var(--color-dark-olive);
  --surface-tonal: var(--color-moss);
  --surface-card: var(--color-moss);
  --surface-card-tonal: var(--color-dark-olive);
  --text-primary: var(--text-on-dark);
  --text-secondary: var(--text-on-dark);
  --border-hairline: rgba(252, 251, 247, 0.15);
  --border-hairline-strong: rgba(252, 251, 247, 0.35);
  --divider: var(--color-light-olive);
  --state-hover-wash: rgba(252, 251, 247, 0.10);
  --state-press-wash: rgba(252, 251, 247, 0.18);
  --state-disabled-bg: rgba(252, 251, 247, 0.12);
  --state-disabled-fg: rgba(252, 251, 247, 0.35);

  /* Buttons: ivory fill, black text — the light neutral pops off a dark page. */
  --button-primary-bg: var(--color-ivory);
  --button-primary-fg: #000000;
  --button-primary-bg-hover: var(--color-ivory-hover);
  --button-primary-bg-press: var(--color-ivory-press);
}

[data-theme] {
  background: var(--surface-page);
  color: var(--text-primary);
}