/* ============================================================
   Hypermonkey — Color tokens
   Palette sampled directly from the faceted brand mark (red→violet→blue).
   ============================================================ */
:root {
  /* --- Brand reds (the "attack" side of the mark) --- */
  --red-900: #7A1421;
  --red-800: #AA2A3C;
  --red-700: #C81F38;
  --red-600: #D92942; /* PRIMARY brand red */
  --red-500: #E23E55;
  --red-400: #D86777;
  --red-300: #F08494;
  --red-200: #FFB0BC;
  --red-100: #FFCBD2;
  --red-50:  #FFEAED;

  /* --- Brand blues (the "cool/precision" side of the mark) --- */
  --blue-900: #234B6B;
  --blue-800: #2A5C83;
  --blue-700: #2F6F9C;
  --blue-600: #3089BE; /* SECONDARY brand blue */
  --blue-500: #3F9BCF;
  --blue-400: #58A0CE;
  --blue-300: #76B4D8;
  --blue-200: #99C7E2;
  --blue-100: #C7E1F0;
  --blue-50:  #E9F4FA;

  /* --- Violet bridge (where red meets blue in the gradient) --- */
  --violet-700: #4B4178;
  --violet-600: #5A5190;
  --violet-500: #6A5FA8;
  --violet-400: #8874B2;
  --violet-300: #A29DC1;

  /* --- Sky accent (brightest facet) --- */
  --sky-500: #5AB3DB;
  --sky-400: #6FC0E3;

  /* --- Ink / Neutrals (cool gray ramp, sampled off the wordmark black) --- */
  --ink-1000: #0C0E12;
  --ink-900:  #14161A; /* wordmark black */
  --ink-800:  #1E222B;
  --ink-700:  #2C313C;
  --gray-600: #4A515E;
  --gray-500: #6B7382;
  --gray-400: #939AA8;
  --gray-300: #BBC1CC;
  --gray-200: #DCE0E7;
  --gray-100: #EEF0F4;
  --gray-50:  #F6F7F9;
  --white:    #FFFFFF;

  /* --- Semantic / status --- */
  --success: #1F9D6B;
  --success-soft: #E3F5EE;
  --warning: #E0922B;
  --warning-soft: #FCF1E1;
  --danger:  #D92942; /* shares brand red */
  --danger-soft: #FFEAED;
  --info:    #3089BE;
  --info-soft: #E9F4FA;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product UI
     ============================================================ */
  --brand-primary: var(--red-600);
  --brand-primary-hover: var(--red-700);
  --brand-primary-active: var(--red-800);
  --brand-secondary: var(--blue-600);
  --brand-secondary-hover: var(--blue-700);
  --brand-accent: var(--sky-500);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-800);
  --text-muted: var(--gray-500);
  --text-faint: var(--gray-400);
  --text-on-brand: var(--white);
  --text-link: var(--blue-600);

  --surface-page: var(--gray-50);
  --surface-card: var(--white);
  --surface-sunken: var(--gray-100);
  --surface-inverse: var(--ink-900);
  --surface-inverse-2: var(--ink-800);

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);
  --border-brand: var(--red-600);
  --focus-ring: var(--blue-500);

  /* ============================================================
     SIGNATURE GRADIENTS — the heart of the brand
     ============================================================ */
  --grad-hyper: linear-gradient(100deg, var(--red-600) 0%, var(--violet-500) 50%, var(--blue-600) 100%);
  --grad-hyper-soft: linear-gradient(100deg, var(--red-400) 0%, var(--violet-400) 50%, var(--blue-400) 100%);
  --grad-ink: linear-gradient(160deg, var(--ink-900) 0%, var(--ink-1000) 100%);
  --grad-red: linear-gradient(135deg, var(--red-500) 0%, var(--red-800) 100%);
  --grad-blue: linear-gradient(135deg, var(--sky-500) 0%, var(--blue-700) 100%);
  --grad-text: linear-gradient(95deg, var(--red-600) 0%, var(--violet-500) 55%, var(--blue-600) 100%);
}