/* ============================================================================
   Stellic — Color tokens
   Source: Stellic Brand Guidelines pp.40–41 (Brand Palette + Proportions)
   "Our palette blends warmth, clarity, and support. Blue Black, White, Cream,
   and Beige provide balance and stability while Terracotta, Yellow, and Green
   bring energy and focus."
   ----------------------------------------------------------------------------
   HIERARCHY (p.41):
   - CORE / NEUTRAL  — White, Cream, Beige, Grey, Blue Black. The supporting
     palette; "used across most digital applications," giving the rich colors
     room to flourish.
   - ACCENT          — Terracotta, Yellow, Green. Used SPARINGLY to highlight
     key elements; "best used for smaller elements like tags or spot illustrations."
   ============================================================================ */

:root {
  /* --- Base palette (raw brand colors) --- */
  --color-blue-black: #151B26;  /* RGB 21 27 38   · PMS 532 C / 5395 U */
  --color-white:      #FFFFFF;  /* RGB 255 255 255 */
  --color-cream:      #F5F4ED;  /* RGB 245 244 237 · PMS 9043 C/U */
  --color-beige:      #E3DACC;  /* RGB 227 218 204 · PMS 4239 C/U */
  --color-grey:       #CBC6BD;  /* RGB 203 198 189 · PMS Warm Gray 3 C/U */
  --color-terracotta: #C1441A;  /* RGB 193 68 26  · PMS 173 C / 2349 U */
  --color-yellow:     #F6CF34;  /* RGB 246 207 52 · PMS 122 C / 128 U */
  --color-green:      #76D99C;  /* RGB 118 217 156 · PMS 345 C / 344 U */

  /* --- Role groupings (documented in guidelines) --- */
  /* Core / neutral — default across digital UI */
  --color-core-1: var(--color-white);
  --color-core-2: var(--color-cream);
  --color-core-3: var(--color-beige);
  --color-core-4: var(--color-grey);
  --color-core-5: var(--color-blue-black);

  /* Accent — use sparingly (tags, highlights, spot illustration) */
  --color-accent-terracotta: var(--color-terracotta);
  --color-accent-yellow:     var(--color-yellow);
  --color-accent-green:      var(--color-green);

  /* --- Utility palette ---
     True (cool) grays — SCOPE-LIMITED to text, dividers, and outlines ONLY.
     NOT brand surfaces/fills. Distinct from the warm brand neutrals above.
     e.g. eyebrow/brow text → --color-text-gray. */
  --color-text-gray:         #606060;  /* secondary / brow text */
  --color-disabled-gray:     #707070;  /* disabled text */
  --color-stroke-light:      #EBEBEB;  /* light divider / outline */
  --color-stroke-dark:       #B9B9B9;  /* dark divider / outline */

  /* --- Semantic: text on grounds ---
     Blue Black text on cream / white / light grounds; White text on blue-black / dark grounds.
     (Mirrors the logo contrast rule.) */
  --text-on-light: var(--color-blue-black);
  --text-on-dark:  var(--color-white);

  /* --- Resolved rulings (2026-06-16) ---
     • Accents are DECORATIVE ONLY for now — no success/warning/error mapping.
     • No dark UI theme yet — design for majority light backgrounds (cream/white). Revisit later.
     • Full semantic surface/border/link/focus + data-viz sets intentionally deferred until the
       product design-system phase. See tokens/colors.GOVERNANCE.md. */
}