/*
 * brand-tokens.css
 * Single source of truth for Obrari brand colors.
 *
 * Read by:
 *   - tailwind.config.js       (builds the brand, accent, and spark scales)
 *   - app/services/brand_palette.py  (OG image, badge, widget generators)
 *   - app/templates/base.html  (custom utilities reference these vars)
 *   - the standalone docs that link this file directly
 *
 * Change a color here and every surface follows on the next compile / next draw.
 *
 * THREE BRAND TIERS:
 *   brand  = mulberry, PRIMARY (~80%). CTAs, headings, most accents. #612a4a anchor.
 *   accent = peacock, SECONDARY (~15%). Secondary actions, links, rules. #0f7d78 anchor.
 *   spark  = yellow, SPARK (~5%). Stars, featured marks, key numbers. #ffc21a pop.
 *
 * The spark yellow ALSO serves the WARNING status (pending, delivered). One yellow,
 * two roles, kept apart by placement: a warning badge and a spark mark must never
 * sit in the same cluster. See the governance prompt.
 *
 * Hex vars are for solid fills. The *-rgb channel vars are for rgba()/opacity uses.
 */
:root {
  /* brand: mulberry (primary) */
  --brand-50:  #f8f3f6;
  --brand-100: #eedde7;
  --brand-200: #dbbccd;
  --brand-300: #bf8dab;
  --brand-400: #955a7d;
  --brand-500: #612a4a;
  --brand-600: #4f223c;
  --brand-700: #401b30;
  --brand-800: #301425;
  --brand-900: #200d19;
  --brand:     #612a4a;
  --brand-500-rgb: 97 42 74;
  --brand-700-rgb: 64 27 48;

  /* accent: peacock (secondary) */
  --accent-50:  #eef8f6;
  --accent-100: #c9ebe6;
  --accent-200: #93d6ce;
  --accent-300: #4fb8ad;
  --accent-400: #199488;
  --accent-500: #0f7d78;
  --accent-600: #0c6560;
  --accent-700: #0a4f4c;
  --accent-800: #083d3b;
  --accent-900: #062b29;
  --accent:     #0f7d78;
  --accent-500-rgb: 15 125 120;
  --accent-700-rgb: 10 79 76;

  /* spark: yellow (spark + warning status). Pop is 400; text uses 700 brass. */
  --spark-50:  #fff9e6;
  --spark-100: #fdf0bd;
  --spark-200: #fbe389;
  --spark-300: #fdd451;
  --spark-400: #ffc21a;
  --spark-500: #e2a50a;
  --spark-600: #b9840b;
  --spark-700: #7c560f;
  --spark-800: #5f420a;
  --spark-900: #3d2a08;
  --spark:     #ffc21a;
  --spark-400-rgb: 255 194 26;
}