/* ============================================================
   TechXYZ — Color tokens
   Brand: vivid azure "spark" + deep ink navy, on cool slate neutrals.
   Sampled from the TechXYZ 2026 logo (#00ABFC, #0C2236).
   ============================================================ */

:root {
  /* ---- Brand: Azure (the "spark") -------------------------- */
  --azure-50:  #ECF8FF;
  --azure-100: #CFEEFF;
  --azure-200: #9FDCFF;
  --azure-300: #5FC6FB;
  --azure-400: #1FAEF6;
  --azure-500: #00ABFC;  /* logo blue — brand spark */
  --azure-600: #0089CE;
  --azure-700: #066BA1;
  --azure-800: #0B557F;
  --azure-900: #0F4665;

  /* ---- Brand: Ink (navy) ----------------------------------- */
  --ink-950: #081726;
  --ink-900: #0C2236;  /* logo navy — primary ink */
  --ink-800: #122E47;
  --ink-700: #1B3D5C;
  --ink-600: #294F71;

  /* ---- Neutrals: cool slate -------------------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F5F8FA;
  --neutral-100: #EAF0F4;
  --neutral-200: #D9E2E9;
  --neutral-300: #BCC9D4;
  --neutral-400: #8E9FAE;
  --neutral-500: #647888;
  --neutral-600: #4A5C6B;
  --neutral-700: #364654;
  --neutral-800: #243441;
  --neutral-900: #14222E;

  /* ---- Semantic palettes ----------------------------------- */
  --success-50:  #E7F7F0;
  --success-100: #C3EBD9;
  --success-500: #16A571;
  --success-600: #0E8A5D;
  --success-700: #0B6E4B;

  --warning-50:  #FDF3E2;
  --warning-100: #FAE2BB;
  --warning-500: #E8920C;
  --warning-600: #C5790A;
  --warning-700: #9A5E08;

  --danger-50:  #FCEDEC;
  --danger-100: #F7D2CF;
  --danger-500: #E0473D;
  --danger-600: #C5362D;
  --danger-700: #9E2922;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product UI
     ============================================================ */

  /* Brand */
  --color-brand:        var(--azure-500);
  --color-brand-ink:    var(--ink-900);
  --color-spark:        var(--azure-500);

  /* Primary action (accessible: white text passes AA) */
  --color-primary:        var(--azure-600);
  --color-primary-hover:  var(--azure-700);
  --color-primary-active: var(--azure-800);
  --color-on-primary:     var(--neutral-0);

  /* Secondary action (ink) */
  --color-secondary:        var(--ink-900);
  --color-secondary-hover:  var(--ink-800);
  --color-secondary-active: var(--ink-700);
  --color-on-secondary:     var(--neutral-0);

  /* Text */
  --text-strong:    var(--ink-900);
  --text-body:      var(--neutral-800);
  --text-muted:     var(--neutral-500);
  --text-subtle:    var(--neutral-400);
  --text-on-brand:  var(--neutral-0);
  --text-link:      var(--azure-700);
  --text-link-hover:var(--azure-800);

  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-raised:  var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-ink:     var(--ink-900);
  --surface-ink-2:   var(--ink-800);
  --surface-brand-soft: var(--azure-50);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--azure-500);
  --border-focus:   var(--azure-500);

  /* Semantic status */
  --color-success:      var(--success-500);
  --color-success-soft: var(--success-50);
  --color-warning:      var(--warning-500);
  --color-warning-soft: var(--warning-50);
  --color-danger:       var(--danger-500);
  --color-danger-soft:  var(--danger-50);
  --color-info:         var(--azure-500);
  --color-info-soft:    var(--azure-50);

  /* Focus ring */
  --ring-brand: 0 0 0 3px rgba(0, 171, 252, 0.35);
}