/* atomic HR — Color tokens
   ────────────────────────────────────────────────────────────────────────
   HIERARCHY (per brand spec):
     • Atomic Black #000 + White  → the foundation. Most of the UI.
     • HR Purple   #9140B0        → the HR / asterisk(★) cue. Accent: links,
                                     focus, active states, the brand mark.
     • Energy Yellow #F2C050      → the lightning / energy cue. Highlights only.
     • Orbit colors (green/pink/blue/orange) → secondary accents, used
       SPARINGLY (data viz, avatars, tags). Never large fills.
   Accents should feel energetic but controlled. */

:root {
  /* ---- Foundation ---- */
  --atomic-black: #000000;
  --white:        #ffffff;

  /* ---- Brand cues ---- */
  --hr-purple:        #9140b0;   /* primary accent — the ★/HR cue */
  --hr-purple-700:    #76318f;   /* hover / pressed */
  --hr-purple-300:    #c89adc;
  --hr-purple-100:    #f1e6f6;   /* tint surface */
  --energy-yellow:    #f2c050;   /* the bolt — energy / highlight only */
  --energy-yellow-600:#d3a32f;
  --energy-yellow-100:#fbeecb;

  /* ---- Orbit spectrum — secondary accents, used sparingly ---- */
  --orbit-green:  #90d060;
  --orbit-pink:   #e05090;
  --orbit-blue:   #50b0d0;
  --orbit-orange: #f0b040;

  /* ---- Legacy aliases (kept so existing files resolve) ---- */
  --brand-purple:     var(--hr-purple);
  --brand-purple-700: var(--hr-purple-700);
  --brand-purple-300: var(--hr-purple-300);
  --brand-purple-100: var(--hr-purple-100);
  --brand-yellow:     var(--energy-yellow);
  --brand-yellow-600: var(--energy-yellow-600);
  --brand-yellow-100: var(--energy-yellow-100);
  --spectrum-pink:    var(--orbit-pink);
  --spectrum-purple:  var(--hr-purple);
  --spectrum-green:   var(--orbit-green);
  --spectrum-orange:  var(--orbit-orange);
  --spectrum-teal:    var(--orbit-blue);
  --spectrum-blue:    var(--orbit-blue);
  --spectrum-yellow:  var(--energy-yellow);

  /* ---- Neutrals — clean black & white foundation ---- */
  --paper-0:    #ffffff;
  --paper-50:   #fafafa;
  --paper-100:  #f4f4f5;
  --paper-200:  #e9e9ec;
  --line-300:   #dddde1;
  --ink-400:    #a1a1aa;
  --ink-500:    #82828c;
  --ink-600:    #5c5c66;
  --ink-700:    #3f3f46;
  --ink-800:    #1c1c20;
  --ink-900:    #000000;   /* Atomic Black */

  /* ---- Semantic (functional status) ---- */
  --success:    #2fa25b;
  --success-bg: #e6f5ec;
  --warning:    #d3922b;
  --warning-bg: #fbefd6;
  --danger:     #e0454b;   /* functional red — not a brand color */
  --danger-bg:  #fbe4e5;
  --info:       #3f9bba;
  --info-bg:    #e4f2f7;

  /* ---- Semantic aliases (use these in product, not the raw scale) ---- */
  --bg-page:        var(--paper-50);
  --bg-surface:     var(--paper-0);
  --bg-surface-2:   var(--paper-50);
  --bg-sunken:      var(--paper-100);
  --bg-inverse:     var(--atomic-black);

  --text-strong:    var(--atomic-black);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-on-brand:  #ffffff;          /* text on the black primary action */
  --text-on-accent: #ffffff;          /* text on HR Purple */
  --text-on-yellow: var(--atomic-black);
  --text-inverse:   var(--paper-50);

  --border-subtle:  var(--line-300);
  --border-strong:  var(--atomic-black);

  /* actions: BLACK is primary; PURPLE is the accent/cue */
  --action:         var(--atomic-black);
  --action-hover:   var(--ink-800);
  --accent:         var(--hr-purple);
  --accent-hover:   var(--hr-purple-700);
  --focus-ring:     rgba(145,64,176,0.45);
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --paper-0:    #161619;   /* surface */
  --paper-50:   #1d1d21;
  --paper-100:  #0f0f11;   /* page */
  --paper-200:  #26262b;
  --line-300:   #303036;
  --ink-400:    #6a6a73;
  --ink-500:    #8c8c95;
  --ink-600:    #a8a8b0;
  --ink-700:    #cfcfd4;
  --ink-800:    #e8e8ec;
  --ink-900:    #ffffff;

  --hr-purple:      #b36fd0;
  --hr-purple-700:  #c58fdc;
  --hr-purple-100:  #2a1d31;

  --success-bg: #15301f;
  --warning-bg: #322611;
  --danger-bg:  #341a1c;
  --info-bg:    #102a32;

  --bg-inverse:     var(--paper-0);
  /* on dark, the black primary inverts to white */
  --action:         #ffffff;
  --action-hover:   var(--paper-200);
  --text-on-brand:  #000000;
  --accent:         var(--hr-purple);
  --text-inverse:   var(--atomic-black);
  --border-strong:  var(--ink-800);
  --focus-ring:     rgba(179,111,208,0.5);
}