/* ============================================================
   Xier — Color tokens
   Steel-blue primary (from the logo #4E76AE), warm amber accent,
   warm off-white ground, warm near-black ink. Flat, confident,
   industrial-corporate. No gradients.
   ============================================================ */
:root {
  /* --- Brand: steel blue (primary) --------------------------- */
  --blue-50:  #eef3f9;
  --blue-100: #d7e1f0;
  --blue-200: #b1c6e1;
  --blue-300: #88a8ce;
  --blue-400: #6b91c0;
  --blue-500: #4e76ae;  /* base — sampled from the Xier logo */
  --blue-600: #3f6196;
  --blue-700: #324e79;
  --blue-800: #283d5e;
  --blue-900: #1e2d45;

  /* --- Accent: warm amber (highlights, sparing use) ---------- */
  --amber-100: #f8e8cc;
  --amber-300: #f1ca8d;
  --amber-400: #e8a24e;
  --amber-500: #dd8e2e;  /* base accent */
  --amber-600: #c4781f;

  /* --- Warm neutrals ----------------------------------------- */
  --ground:      #f0efeb;  /* page background (warm off-white) */
  --surface:     #ffffff;  /* raised cards / panels */
  --surface-sunken: #e7e5dd; /* insets, wells, table zebra */
  --grey-warm:   #dcd9ce;  /* secondary surface (menu, footers blocks) */
  --grey-line:   #cfccbf;  /* hairlines on the ground */

  --ink-900: #1c1916;  /* primary text (warm near-black) */
  --ink-700: #423d36;  /* strong secondary text */
  --ink-500: #6b655b;  /* secondary text / captions */
  --ink-300: #938d81;  /* muted / placeholder */
  --white:   #ffffff;
  --black:   #100e0c;

  /* --- Semantic ---------------------------------------------- */
  --success: #3f7a53;
  --warning: #dd8e2e;
  --danger:  #9b2c24;
  --info:    var(--blue-500);

  /* ============================================================
     Semantic aliases — prefer these in component code
     ============================================================ */
  --color-bg:            var(--ground);
  --color-surface:       var(--surface);
  --color-surface-sunken:var(--surface-sunken);
  --color-panel:         var(--grey-warm);

  --color-text:          var(--ink-900);
  --color-text-secondary:var(--ink-500);
  --color-text-muted:    var(--ink-300);
  --color-text-onbrand:  var(--white);

  --color-primary:       var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-primary-press: var(--blue-700);
  --color-primary-soft:  var(--blue-50);

  --color-accent:        var(--amber-500);
  --color-accent-hover:  var(--amber-600);
  --color-accent-soft:   var(--amber-100);

  --color-border:        var(--grey-line);
  --color-border-strong: var(--ink-900);
  --color-border-onbrand:rgba(255,255,255,.28);

  --color-focus:         var(--blue-500);
  --color-selection-bg:  var(--blue-500);
  --color-selection-fg:  var(--white);
}