/* ============================================================
   SYTE.bio — Color tokens
   The brand spectrum is the six interlocking rings of the
   "imago" mark (the flower-of-life / nucleic-acid core).
   The system is dark-first: near-black foundations, white
   ink, cobalt as the single load-bearing accent.
   ============================================================ */

:root {
  /* --- Brand spectrum (the six rings of the imago) --- */
  --spectrum-blue:   #1E40C8;  /* cobalt — top ring, primary accent   */
  --spectrum-violet: #8A5ED0;  /* left ring                            */
  --spectrum-red:    #C2474F;  /* lower-left ring                      */
  --spectrum-gold:   #C9A227;  /* bottom ring                          */
  --spectrum-green:  #2A9D2A;  /* lower-right ring                     */
  --spectrum-teal:   #3E97A0;  /* right ring                           */

  /* --- Cobalt ramp (primary accent) --- */
  --cobalt-50:  #EAEEFB;
  --cobalt-100: #CBD5F4;
  --cobalt-200: #9DB0EC;
  --cobalt-300: #6A85E0;
  --cobalt-400: #3F5CD6;
  --cobalt-500: #1E40C8;  /* base */
  --cobalt-600: #1834A8;
  --cobalt-700: #142A86;
  --cobalt-800: #112263;
  --cobalt-900: #0C1844;

  /* --- Neutral ink ramp (cool near-black slate) --- */
  --black:    #05070A;
  --ink-950:  #08090D;
  --ink-900:  #0C0E13;
  --ink-850:  #11141B;
  --ink-800:  #161A22;
  --ink-700:  #1E232D;
  --ink-600:  #2A313D;
  --ink-500:  #3A4350;
  --ink-400:  #5A6472;
  --ink-300:  #828C9A;
  --ink-200:  #AEB6C2;
  --ink-100:  #D7DCE3;
  --ink-50:   #EEF1F5;
  --white:    #FFFFFF;

  /* ============================================================
     Semantic aliases — DARK theme (default)
     ============================================================ */

  /* Surfaces */
  --surface-base:    var(--ink-950);   /* page background        */
  --surface-sunken:  var(--black);     /* wells, code, hero      */
  --surface-card:    var(--ink-900);   /* cards on base          */
  --surface-raised:  var(--ink-850);   /* elevated panels, menus */
  --surface-overlay: rgba(8, 9, 13, 0.72);
  --surface-inverse: var(--white);     /* light island on dark   */

  /* Text */
  --text-primary:   var(--white);
  --text-secondary: var(--ink-200);
  --text-muted:     var(--ink-300);
  --text-faint:     var(--ink-400);
  --text-inverse:   var(--ink-900);
  --text-accent:    var(--cobalt-300);
  --text-on-accent: var(--white);

  /* Borders & lines */
  --border-subtle:  rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.13);
  --border-strong:  rgba(255, 255, 255, 0.24);
  --border-accent:  var(--cobalt-500);
  --divider:        rgba(255, 255, 255, 0.09);

  /* Accent (interactive) */
  --accent:         var(--cobalt-500);
  --accent-hover:   var(--cobalt-400);
  --accent-press:   var(--cobalt-600);
  --accent-soft:    rgba(30, 64, 200, 0.16);
  --accent-on:      var(--white);
  --focus-ring:     rgba(63, 92, 214, 0.55);

  /* Status — drawn from the spectrum */
  --success:      var(--spectrum-green);
  --success-soft: rgba(42, 157, 42, 0.16);
  --warning:      var(--spectrum-gold);
  --warning-soft: rgba(201, 162, 39, 0.16);
  --danger:       var(--spectrum-red);
  --danger-soft:  rgba(194, 71, 79, 0.16);
  --info:         var(--spectrum-teal);
  --info-soft:    rgba(62, 151, 160, 0.16);

  /* Pipeline phase ramp (research → market) */
  --phase-research:   var(--spectrum-violet);
  --phase-optimize:   var(--spectrum-blue);
  --phase-preclinic:  var(--spectrum-teal);
  --phase-phase1:     var(--spectrum-green);
  --phase-phase2:     var(--spectrum-gold);
  --phase-phase3:     #D77A2A;             /* amber-orange bridge */
  --phase-market:     var(--spectrum-red);
}

/* ============================================================
   LIGHT theme — for white islands, print, light decks
   Apply on a container: data-theme="light"
   ============================================================ */
[data-theme="light"] {
  --surface-base:    var(--white);
  --surface-sunken:  var(--ink-50);
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-overlay: rgba(255, 255, 255, 0.78);
  --surface-inverse: var(--ink-950);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-400);
  --text-faint:     var(--ink-300);
  --text-inverse:   var(--white);
  --text-accent:    var(--cobalt-600);
  --text-on-accent: var(--white);

  --border-subtle:  rgba(8, 9, 13, 0.07);
  --border-default: rgba(8, 9, 13, 0.13);
  --border-strong:  rgba(8, 9, 13, 0.22);
  --divider:        rgba(8, 9, 13, 0.09);

  --accent-soft:    rgba(30, 64, 200, 0.10);
  --focus-ring:     rgba(30, 64, 200, 0.40);
}