/* ============================================================
   THE SOURCE — COLOR SYSTEM
   "Authority with restraint." A strictly monochrome foundation
   with a single decisive accent. Every color has a job; nothing
   is decorative.
   ============================================================ */
:root {
  /* ---- Brand core (from Brand Guidelines, Spring 2026) ---- */
  --ts-tuxedo-black: #171313;   /* BASE — backgrounds, banners, text */
  --ts-stone-silver: #3a424d;   /* SECONDARY — dividers, soft text, hierarchy */
  --ts-pure-white:   #ffffff;   /* SECONDARY — accent backgrounds, text */
  --ts-royal-red:    #8b0000;   /* ACCENT — lines, frames, decisive CTAs */

  /* ---- Neutral ramp (derived from Tuxedo Black / Stone Silver) ---- */
  --ts-ink-900: #171313;   /* = Tuxedo Black */
  --ts-ink-800: #221e1e;
  --ts-ink-700: #2c2828;
  --ts-slate-600: #3a424d;  /* = Stone Silver */
  --ts-slate-500: #4d5560;
  --ts-slate-400: #6b727c;
  --ts-slate-300: #969ba3;
  --ts-mist-200: #c7cace;
  --ts-mist-100: #e4e6e8;
  --ts-mist-50:  #f3f4f5;
  --ts-paper:    #fafafa;
  --ts-white:    #ffffff;

  /* ---- Accent ramp (Royal Red) ---- */
  --ts-red-700: #6e0000;   /* pressed */
  --ts-red-600: #8b0000;   /* = Royal Red */
  --ts-red-500: #a31616;   /* hover */
  --ts-red-100: #f4e2e2;   /* faint tint surface */

  /* ---- Functional status (used sparingly in product UI only) ---- */
  --ts-success: #1f6b4a;
  --ts-warning: #9a6a12;
  --ts-danger:  #8b0000;   /* reuses Royal Red */

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not raw hex
     ============================================================ */
  /* Surfaces */
  --surface-base:    var(--ts-white);
  --surface-raised:  var(--ts-white);
  --surface-sunken:  var(--ts-mist-50);
  --surface-inverse: var(--ts-tuxedo-black);   /* dark banners / hero */
  --surface-overlay: rgba(23, 19, 19, 0.60);   /* 60% Tuxedo Black text panel */

  /* Text */
  --text-primary:   var(--ts-tuxedo-black);
  --text-secondary: var(--ts-slate-600);
  --text-muted:     var(--ts-slate-400);
  --text-inverse:   var(--ts-pure-white);
  --text-accent:    var(--ts-royal-red);

  /* Lines & borders */
  --border-subtle:  var(--ts-mist-100);
  --border-default: var(--ts-mist-200);
  --border-strong:  var(--ts-tuxedo-black);
  --rule-accent:    var(--ts-royal-red);   /* the structural red line/frame */

  /* Interactive (accent) */
  --action-fg:        var(--ts-pure-white);
  --action-bg:        var(--ts-tuxedo-black);
  --action-bg-hover:  var(--ts-ink-700);
  --action-bg-press:  #000000;
  --accent-bg:        var(--ts-royal-red);
  --accent-bg-hover:  var(--ts-red-500);
  --accent-bg-press:  var(--ts-red-700);

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