/* ============================================================
   Smarterix — Color tokens
   Brand signature bar: red · yellow · blue · green over slate ink
   ============================================================ */
:root {
  /* --- Brand core --------------------------------------------------- */
  --sx-red:    #F50D00;   /* signature 1 — energy / accent / alert      */
  --sx-yellow: #FBBA00;   /* signature 2 — optimism / highlight         */
  --sx-blue:   #007EBB;   /* signature 3 — trust / primary action       */
  --sx-green:  #A6CE39;   /* signature 4 — growth / success             */
  --sx-ink:    #33363D;   /* wordmark slate — primary ink               */

  /* --- Brand tints (soft surfaces) --------------------------------- */
  --sx-red-tint:    #FFEAE8;
  --sx-yellow-tint: #FFF4D6;
  --sx-blue-tint:   #E0F0F8;
  --sx-green-tint:  #EEF6DC;

  /* --- Brand deepened (hover / text-on-light) ---------------------- */
  --sx-red-deep:    #C50B00;
  --sx-yellow-deep: #C68F00;
  --sx-blue-deep:   #00628F;
  --sx-green-deep:  #7FA227;

  /* --- Neutral slate ramp (hue-matched to ink) --------------------- */
  --sx-ink-900: #23262B;
  --sx-ink-800: #33363D;  /* = --sx-ink */
  --sx-ink-700: #4A4E57;
  --sx-ink-600: #646973;
  --sx-ink-500: #868B95;
  --sx-ink-400: #A9ADB5;
  --sx-ink-300: #C9CCD2;
  --sx-ink-200: #E2E4E8;
  --sx-ink-100: #EFF0F3;
  --sx-ink-50:  #F7F8F9;
  --sx-white:   #FFFFFF;

  /* --- Semantic aliases -------------------------------------------- */
  --color-bg:            var(--sx-white);
  --color-surface:       var(--sx-white);
  --color-surface-muted: var(--sx-ink-50);
  --color-surface-sunken:var(--sx-ink-100);
  --color-surface-dark:  var(--sx-ink-900);

  --text-strong:  var(--sx-ink-900);
  --text-body:    var(--sx-ink-800);
  --text-muted:   var(--sx-ink-600);
  --text-subtle:  var(--sx-ink-500);
  --text-on-dark: var(--sx-white);
  --text-on-accent: var(--sx-white);

  --border:        var(--sx-ink-200);
  --border-strong: var(--sx-ink-300);
  --border-focus:  var(--sx-blue);

  --color-primary:        var(--sx-blue);
  --color-primary-hover:  var(--sx-blue-deep);
  --color-primary-tint:   var(--sx-blue-tint);

  --color-accent:         var(--sx-red);
  --color-accent-hover:   var(--sx-red-deep);

  --color-success: var(--sx-green);
  --color-success-tint: var(--sx-green-tint);
  --color-warning: var(--sx-yellow);
  --color-warning-tint: var(--sx-yellow-tint);
  --color-danger:  var(--sx-red);
  --color-danger-tint: var(--sx-red-tint);
  --color-info:    var(--sx-blue);
  --color-info-tint: var(--sx-blue-tint);

  /* --- Focus ring -------------------------------------------------- */
  --ring: 0 0 0 3px color-mix(in srgb, var(--sx-blue) 35%, transparent);
}