/* TANGO — Color tokens
 * Neo Bauhaus Noir: strict red / black / cream. No purple, gold, or pastels.
 */
:root {
  /* ---- Base palette ---------------------------------------------------- */
  /* Tango red — saturated, dramatic, cinematic */
  --tango-red: #E50914;        /* hero red — the loud one */
  --tango-red-deep: #C8102E;   /* deeper red — platforms, pressed states */
  --tango-red-blood: #8E0912;  /* darkest red — shadows within red planes */

  /* Noir black */
  --noir-900: #050505;         /* near-total black — primary ground */
  --noir-800: #0B0B0B;
  --noir-700: #111111;         /* soft display shadow black */
  --noir-600: #1A1A1A;         /* raised surface on black */
  --noir-500: #262626;         /* hairline / border on black */

  /* Cream — warm off-white, never gold */
  --cream-100: #FFF3D6;        /* brightest cream — light panels */
  --cream-200: #F4E8C8;        /* primary cream — type & lines */
  --cream-300: #E4D6B0;        /* muted cream — secondary type on dark */
  --cream-shadow: #D8C9A2;

  /* Neutral greys (photographic seams, POS metal) — used sparingly */
  --grey-fog: #9A9A9A;
  --grey-stage: #C9C9C9;

  /* ---- Semantic aliases ------------------------------------------------ */
  /* Grounds */
  --surface-noir: var(--noir-900);       /* default page ground */
  --surface-noir-raised: var(--noir-600);
  --surface-red: var(--tango-red);       /* red stage / panel */
  --surface-red-deep: var(--tango-red-deep);
  --surface-cream: var(--cream-200);     /* light panel ground */

  /* Text */
  --text-on-noir: var(--cream-200);      /* cream type on black */
  --text-on-noir-muted: var(--cream-300);
  --text-on-noir-dim: var(--grey-fog);
  --text-on-red: var(--cream-100);       /* cream type on red */
  --text-on-cream: var(--noir-900);      /* black type on cream */
  --text-on-cream-muted: #4A4033;

  /* Accent / interactive */
  --accent: var(--tango-red);
  --accent-hover: #FF1621;               /* slightly brighter on hover */
  --accent-press: var(--tango-red-deep); /* deeper on press */

  /* Lines & borders */
  --line-cream: var(--cream-200);        /* signature cream hairline */
  --line-noir: var(--noir-500);          /* subtle border on dark */
  --line-red: var(--tango-red);

  /* Focus */
  --focus-ring: var(--tango-red);
}