/* ============================================================
   H2 AESTHETICS — COLOR TOKENS
   Signature deep purple, royal-purple accent, gold for luxury
   highlights, warm neutrals for clarity. Recommended field
   ratio: ~60% soft white / 25% deep purple+charcoal /
   10% royal purple / 5% gold.
   ============================================================ */

:root {
  /* ---- Brand purple ramp (anchor: 900 = H2 Deep Purple, 500 = Royal Purple) ---- */
  --purple-50:  #F3EFF7;
  --purple-100: #E5DCEE;
  --purple-200: #C9BAD9;
  --purple-300: #A98FBF;
  --purple-400: #8869A6;
  --purple-500: #6B4B94;  /* Royal Purple — links, accents, secondary emphasis */
  --purple-600: #573C7A;
  --purple-700: #472F63;
  --purple-800: #3C2856;
  --purple-900: #33184B;  /* H2 Deep Purple — primary brand field */
  --purple-950: #21102F;

  /* ---- Gold ramp (anchor: 500 = H2 Gold) ---- */
  --gold-50:  #FAF8EC;
  --gold-100: #F3EFD2;
  --gold-200: #E6DDA6;
  --gold-300: #D7CB7C;
  --gold-400: #CABF63;
  --gold-500: #BEB14E;  /* H2 Gold — foil, premium accents */
  --gold-600: #A2963C;
  --gold-700: #7C722C;

  /* ---- Neutrals (warm, anchored on Soft White / Warm Stone / Charcoal) ---- */
  --white:      #FFFFFF;
  --soft-white: #FAFAF8;  /* Soft White — page background, negative space */
  --stone-50:   #F4F3F0;
  --stone-100:  #ECEAE5;
  --stone-200:  #DEDBD4;
  --stone-300:  #CDC9C2;
  --stone-400:  #BDBAB4;  /* Warm Stone — dividers, neutral support */
  --stone-500:  #989590;
  --stone-600:  #6E6C67;
  --stone-700:  #494845;
  --charcoal:   #1F1F1D;  /* Charcoal Black — primary text, mono logo */

  /* ---- Status (muted, evidence-calm — no neon) ---- */
  --success-500: #4F7A5B;
  --success-50:  #EAF1EC;
  --warning-500: #A2963C;
  --warning-50:  #F6F2DF;
  --danger-500:  #9B3B3B;
  --danger-50:   #F4E7E7;
  --info-500:    #6B4B94;
  --info-50:     #EFEAF6;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components & layouts
     ============================================================ */

  /* Brand */
  --brand-primary:    var(--purple-900);
  --brand-secondary:  var(--purple-500);
  --brand-accent:     var(--gold-500);
  --brand-accent-ink: var(--gold-700);

  /* Text */
  --text-strong:   var(--charcoal);
  --text-body:     #36352F;
  --text-muted:    var(--stone-600);
  --text-subtle:   var(--stone-500);
  --text-on-dark:  var(--soft-white);
  --text-on-dark-muted: #C9C0D6;
  --text-link:     var(--purple-500);
  --text-link-hover: var(--purple-700);
  --text-accent:   var(--gold-700);

  /* Surfaces */
  --surface-page:    var(--soft-white);
  --surface-card:    var(--white);
  --surface-subtle:  var(--stone-50);
  --surface-sunken:  var(--stone-100);
  --surface-tint:    var(--purple-50);   /* faint purple wash */
  --surface-deep:    var(--purple-900);  /* signature field */
  --surface-deeper:  var(--purple-950);
  --surface-accent:  var(--gold-500);

  /* Borders & dividers */
  --border-subtle:   var(--stone-200);
  --border-default:  var(--stone-300);
  --border-strong:   var(--stone-400);
  --border-deep:     var(--purple-800);
  --border-gold:     var(--gold-500);
  --divider:         var(--stone-200);

  /* Interactive */
  --focus-ring:      var(--purple-500);
  --selection-bg:    var(--purple-100);

  /* Gold hairline — the brand's signature contour line */
  --hairline-gold:   var(--gold-500);
}

::selection { background: var(--selection-bg); }