/* ============================================================
   BLUE OX BROOMBALL — COLOR TOKENS
   Identity: deep ink black + ice-cyan "Ox Blue" signature,
   aluminum steels, and the Delta-head accent colors.
   ============================================================ */

:root {
  /* ---- Ink / near-black (primary surfaces, wordmark) ---- */
  --ink-900: #0a0c0d;
  --ink-800: #121517;
  --ink-700: #1c2023;
  --ink-600: #282d31;
  --ink-500: #363c41;

  /* ---- Steel / aluminum greys (shaft metal) ---- */
  --steel-600: #4a545a;
  --steel-500: #5f6a71;
  --steel-400: #8a9499;
  --steel-300: #b4bcc0;
  --steel-200: #d3dadd;

  /* ---- Ice / snow (light surfaces) ---- */
  --ice-300: #cfe6ec;
  --ice-200: #e2f0f3;
  --ice-100: #eef6f8;
  --paper:   #f4f8f9;
  --snow:    #ffffff;

  /* ---- Ox Cyan — the signature "Blue Ox" blue ---- */
  --ox-200: #b6e6ef;
  --ox-300: #74cfe0;
  --ox-400: #45c1d6;
  --ox-500: #1fb0c9;  /* core brand cyan */
  --ox-600: #1391a8;
  --ox-700: #0d7286;

  /* ---- Midnight — deep teal-navy for rich dark grounds ---- */
  --midnight-900: #04181f;
  --midnight-800: #06212a;
  --midnight-700: #0a3340;

  /* ---- Delta head accent colors (product palette) ---- */
  --head-black:  #15181a;
  --head-blue:   #2b5fd9;
  --head-green:  #36ad5a;
  --head-pink:   #ec6fa8;
  --head-yellow: #f2c53d;
  --head-red:    #d8392f;
  --head-orange: #e8722b;
  --head-gray:   #8a9499;
  --head-white:  #f7fafb;

  /* ---- Semantic state colors ---- */
  --success: #36ad5a;
  --warning: #e8a022;
  --danger:  #d8392f;
  --info:    var(--ox-500);

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

  /* Surfaces (light context, default) */
  --surface-page:    var(--paper);
  --surface-card:    var(--snow);
  --surface-sunken:  var(--ice-100);
  --surface-inverse: var(--ink-900);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--steel-500);
  --text-subtle:   var(--steel-400);
  --text-on-dark:  var(--snow);
  --text-on-brand: var(--ink-900);
  --text-link:     var(--ox-600);

  /* Brand */
  --brand:         var(--ox-500);
  --brand-strong:  var(--ox-600);
  --brand-tint:    var(--ox-200);

  /* Borders / lines */
  --border-soft:   var(--steel-200);
  --border-strong: var(--steel-300);
  --border-ink:    var(--ink-900);
  --border-brand:  var(--ox-500);

  /* Focus ring */
  --focus-ring: var(--ox-400);
}