/* ============================================================
   CYBERNETIX · COLOR TOKENS
   Deep-space navy canvas, coral energy, electric-cyan signal.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --cx-navy-900: #050519;   /* deepest void */
  --cx-navy-800: #08082d;   /* primary page background */
  --cx-navy-700: #0c0c36;   /* raised background */
  --cx-navy-600: #111134;   /* card / surface */
  --cx-navy-500: #16163f;   /* elevated surface */
  --cx-navy-400: #1c1c4a;   /* hover surface */
  --cx-navy-300: #262661;   /* border / divider on navy */
  --cx-ink:      #0f1116;   /* near-black panel (menus, code) */

  /* ---- Coral (primary accent) ---- */
  --cx-coral-700: #c64f30;
  --cx-coral-600: #e85f3c;
  --cx-coral-500: #f2714e;  /* PRIMARY brand coral */
  --cx-coral-400: #fd8462;  /* highlight tint */
  --cx-coral-300: #ff9d80;
  --cx-coral-100: #ffd9cc;

  /* ---- Cyan (secondary accent / signal) ---- */
  --cx-cyan-700: #1796b0;
  --cx-cyan-600: #22b8d6;
  --cx-cyan-500: #2fd4ef;   /* SECONDARY brand cyan */
  --cx-cyan-400: #49e2f5;   /* bright tint */
  --cx-cyan-300: #87eeff;
  --cx-cyan-100: #cdf7ff;

  /* ---- Neutrals (cool lavender-grey ramp) ---- */
  --cx-white:    #ffffff;
  --cx-grey-100: #ececf4;
  --cx-grey-200: #c9c9dd;
  --cx-grey-300: #a3a3c0;
  --cx-grey-400: #7d7da0;
  --cx-grey-500: #5b5b7e;
  --cx-grey-600: #3d3d5c;
  --cx-black:    #000000;

  /* ---- Semantic status ---- */
  --cx-success: #34d399;
  --cx-warning: #fbbf24;
  --cx-danger:  #f04e6a;
  --cx-info:    var(--cx-cyan-500);

  /* ---- Brand gradients ---- */
  --cx-gradient-brand: linear-gradient(120deg, #f2714e 0%, #2fd4ef 100%); /* @kind other */
  --cx-gradient-coral: linear-gradient(135deg, #fd8462 0%, #e85f3c 100%); /* @kind other */
  --cx-gradient-cyan:  linear-gradient(135deg, #49e2f5 0%, #22b8d6 100%); /* @kind other */
  --cx-gradient-hero:  radial-gradient(120% 120% at 80% 10%, #16163f 0%, #08082d 55%, #050519 100%); /* @kind other */
  --cx-gradient-mark:  linear-gradient(135deg, #ff6a3d 0%, #ff3d6e 45%, #1fa8ff 55%, #28c7f5 100%); /* @kind other */

  /* ============================================================
     SEMANTIC ALIASES — reach for these in product code
     ============================================================ */
  --bg-page:        var(--cx-navy-800);
  --bg-raised:      var(--cx-navy-700);
  --bg-overlay:     rgba(5, 5, 25, 0.72);
  --surface-card:   var(--cx-navy-600);
  --surface-card-hover: var(--cx-navy-400);
  --surface-panel:  var(--cx-ink);
  --surface-inset:  var(--cx-navy-900);

  --text-primary:   var(--cx-white);
  --text-body:      var(--cx-grey-200);
  --text-muted:     var(--cx-grey-400);
  --text-on-accent: var(--cx-navy-900);

  --accent:         var(--cx-coral-500);
  --accent-hover:   var(--cx-coral-400);
  --accent-press:   var(--cx-coral-600);
  --signal:         var(--cx-cyan-500);
  --signal-hover:   var(--cx-cyan-400);

  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.16);
  --border-accent:  var(--cx-coral-500);
  --focus-ring:     var(--cx-cyan-400);
}