/* ============================================================
   S-PRO — Color tokens
   Editorial, minimal. Near-white canvas, near-black ink,
   neutral grays, ONE magenta accent (use sparingly), deep
   navy for dark sections. Two system colors (error/success).
   ============================================================ */

:root {
  /* ---- Neutrals (the workhorses) -------------------------- */
  --white:           #FFFFFF;
  --black:           #17171C;  /* primary ink — never pure #000 */
  --gray-dark:       #5E6172;  /* secondary text */
  --gray-dark-muted: #747684;  /* tertiary / captions */
  --gray:            #D1D2D6;  /* hairlines, disabled */
  --gray-light:      #F9F9FA;  /* page background — never pure gray */
  --gray-hairline:   #ECECEF;  /* thin section dividers */

  /* ---- Primary · Magenta (THE accent — ~5% max per screen) - */
  --magenta-100: #FFE2E8;
  --magenta-200: #FFCAD6;
  --magenta-300: #FF9FB4;
  --magenta-400: #FF698D;
  --magenta-500: #FF1E5A;  /* the brand magenta */
  --magenta-600: #ED1156;
  --magenta-700: #C80849;
  --magenta-800: #A80944;
  --magenta-900: #8F0C40;

  /* ---- Secondary · Slate/Navy (dark sections) ------------- */
  --slate-100: #D1D1D6;
  --slate-200: #BABBC1;
  --slate-300: #A2A5AE;
  --slate-400: #8D8D9A;
  --slate-500: #767886;
  --slate-600: #5F6172;
  --slate-700: #494B5E;
  --slate-800: #31344A;
  --slate-900: #17171C;  /* dark sections / footer — brand near-black */

  /* ---- System ---------------------------------------------- */
  --error:   #F93939;
  --success: #249F58;

  /* ============================================================
     SEMANTIC ALIASES — reach for these in product code
     ============================================================ */

  /* Surfaces */
  --surface-page:    var(--gray-light);
  --surface-card:    var(--white);
  --surface-dark:    var(--slate-900);
  --surface-sunken:  var(--white);

  /* Text */
  --text-primary:    var(--black);
  --text-secondary:  var(--gray-dark);
  --text-tertiary:   var(--gray-dark-muted);
  --text-disabled:   var(--gray);
  --text-on-dark:    var(--white);
  --text-on-dark-secondary: var(--slate-300);
  --text-accent:     var(--magenta-500);

  /* Accent */
  --accent:          var(--magenta-500);
  --accent-hover:    var(--magenta-600);
  --accent-soft:     var(--magenta-100);

  /* Lines & borders */
  --border-strong:   var(--black);     /* outlined buttons, link rules */
  --border-default:  var(--gray);
  --border-hairline: var(--gray-hairline);
  --border-accent:   var(--magenta-500);
  --border-on-dark:  rgba(255,255,255,0.14);

  /* Focus */
  --focus-ring:      var(--magenta-500);
}