/* ============================================================
   4EBIT · Color tokens
   Brand palette: signal red, near-black ink, slate neutrals.
   Base scale first, semantic aliases below.
   ============================================================ */

:root {
  /* ---- Brand red scale ---------------------------------- */
  --red-700: #8E0C10;   /* deep — pressed states, text on tint */
  --red-600: #A50F13;   /* hover */
  --red-500: #CD1318;   /* PRIMARY 4EBIT red */
  --red-400: #E5484D;   /* bright accent / highlights */
  --red-200: #F6B6B8;   /* soft */
  --red-100: #FFE2E3;   /* tint surface */
  --red-50:  #FFF1F1;   /* faint wash */

  /* ---- Ink (dark surfaces & strong text) ---------------- */
  --ink-900: #14171B;
  --ink-800: #1B1F24;   /* primary dark surface / strongest text */
  --ink-700: #232830;   /* elevated dark surface */
  --ink-600: #2D333B;
  --ink-500: #353B42;   /* dark hairline / borders on dark */

  /* ---- Slate (secondary text & muted UI) ---------------- */
  --slate-600: #404952;
  --slate-500: #55606A;  /* secondary body text */
  --slate-400: #8A9196;  /* muted / captions */
  --slate-300: #AEB4B9;  /* disabled text, placeholder */

  /* ---- Gray (borders & light surfaces) ------------------ */
  --gray-200: #DDE0E3;   /* strong border */
  --gray-150: #E2E5E8;   /* default border */
  --gray-100: #EDEEF0;   /* subtle border / divider */
  --gray-75:  #F4F5F6;   /* subtle surface */
  --gray-50:  #F8F9FA;   /* page tint */
  --white:    #FFFFFF;

  /* ---- Functional / data-status (use sparingly) --------- */
  --green-500: #2E9E5B;  --green-100: #E2F4E9;
  --amber-500: #E0930F;  --amber-100: #FBEFD6;
  --blue-500:  #2D6CDF;  --blue-100:  #E1EAFB;

  /* ========================================================
     SEMANTIC ALIASES — prefer these in components
     ======================================================== */

  /* Brand */
  --brand:          var(--red-500);
  --brand-hover:    var(--red-600);
  --brand-active:   var(--red-700);
  --brand-bright:   var(--red-400);
  --brand-tint:     var(--red-100);
  --brand-wash:     var(--red-50);
  --on-brand:       var(--white);

  /* Text */
  --text-strong:    var(--ink-800);
  --text-secondary: var(--slate-500);
  --text-muted:     var(--slate-400);
  --text-disabled:  var(--slate-300);
  --text-inverse:   var(--white);
  --text-inverse-muted: rgba(255,255,255,0.66);
  --text-brand:     var(--red-500);

  /* Surfaces */
  --surface-page:   var(--white);
  --surface-tint:   var(--gray-50);
  --surface-card:   var(--white);
  --surface-subtle: var(--gray-75);
  --surface-dark:   var(--ink-800);
  --surface-dark-2: var(--ink-700);
  --surface-dark-3: var(--ink-600);

  /* Borders & dividers */
  --border-subtle:  var(--gray-100);
  --border-default: var(--gray-150);
  --border-strong:  var(--gray-200);
  --border-dark:    var(--ink-500);
  --divider:        var(--gray-100);

  /* States / utility */
  --focus-ring:     rgba(205,19,24,0.40);   /* red @ 40% */
  --overlay-scrim:  rgba(20,23,27,0.55);

  /* Status (functional only) */
  --success: var(--green-500); --success-bg: var(--green-100);
  --warning: var(--amber-500); --warning-bg: var(--amber-100);
  --info:    var(--blue-500);  --info-bg:    var(--blue-100);
  --danger:  var(--red-500);   --danger-bg:  var(--red-100);
}