/* ============================================================
   HHC HOT CHICKEN — COLOR TOKENS
   High-contrast, fiery palette. Black canvas, blazing reds,
   warm food tones. Base values first, semantic aliases below.
   ============================================================ */
:root {
  /* ---- Core canvas + ink ---- */
  --black: #000000;          /* primary canvas */
  --white: #FFFFFF;          /* cards / light surfaces */
  --light-text: #F9FBFD;     /* default body/heading text on dark */
  --ink: #040F19;            /* near-black text on light surfaces */

  /* ---- Brand reds (the heat) ---- */
  --menu-heading-red: #E30513; /* alert bar / primary brand red */
  --dark-red: #E51C1F;
  --hot-red: #FD3C02;          /* CTA / spice */
  --light-red: #FF4823;

  /* ---- Warm browns / oranges ---- */
  --dark-orange: #FC5A00;
  --light-brown: #CA6C01;
  --dark-brown: #853A2B;

  /* ---- Greens ---- */
  --dark-green: #3CA350;
  --light-green: #69B782;

  /* ---- Yellows ---- */
  --gg-yellow: #F4B400;
  --light-yellow: #FEF4BC;

  /* ---- Grays (utility) ---- */
  --gray-1: #F6F9FC;
  --gray-2: #DDDDDD;
  --gray-3: #6A7781;   /* muted text */
  --gray-4: #6A7781;

  /* ---- Accent (social / 3rd-party icons) ---- */
  --blue: #0B68D1;
  --li-blue: #0072B1;
  --dark-purple: #7260DB;

  /* ---- Spice meter ramp (yellow -> orange -> red) ---- */
  --spice-1: #FFFB03;
  --spice-2: #FFDB00;
  --spice-3: #FFC402;
  --spice-4: #FFB501;
  --spice-5: #FFA202;
  --spice-6: #FF8E00;
  --spice-7: #FF7B02;
  --spice-gradient: linear-gradient(90deg,
    var(--spice-1), var(--spice-2), var(--spice-3), var(--spice-4),
    var(--spice-5), var(--spice-6), var(--spice-7));

  /* ---- Colorize ramp (decorative) ---- */
  --colorize25: #D80101;
  --colorize50: #715EDF;
  --colorize75: #2D8ADB;
  --colorize100: #148F48;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components/screens
     ============================================================ */
  --bg-page: var(--black);
  --bg-surface: var(--white);
  --bg-surface-muted: var(--gray-1);

  --text-on-dark: var(--light-text);
  --text-on-light: var(--ink);
  --text-muted: var(--gray-3);

  --brand-primary: var(--menu-heading-red);
  --brand-cta: var(--hot-red);
  --brand-accent: var(--light-red);

  --alert-bg: var(--menu-heading-red);
  --alert-text: var(--white);

  --border-subtle: rgba(249, 251, 253, 0.14);
  --border-on-light: var(--gray-2);

  --focus-ring: var(--light-red);
  --success: var(--dark-green);
  --warning: var(--gg-yellow);
  --danger: var(--dark-red);
}