/* MagneDS — Colors
   The whole brand rides on three values. Black is the surface, white is the
   text, gold is the accent only (logo, lines, glow). Gold is NEVER a fill area. */

:root {
  /* ---- Base palette (the only three brand colors) ---- */
  --black: #0A0A0D;   /* base & background — dominant surface of every graphic */
  --gold:  #C9A84C;   /* accent only: logo, lines, highlights — never a fill */
  --white: #FFFFFF;   /* text & headings */

  /* ---- Gold tints/shades (for glows, hairlines, hover states only) ---- */
  --gold-bright: #E4C56A;  /* lit edge of a glow / hover */
  --gold-deep:   #8A6F2E;  /* shadowed end of a gold gradient */
  --gold-line:   rgba(201, 168, 76, 0.55);  /* default divider line */
  --gold-faint:  rgba(201, 168, 76, 0.14);  /* hairline borders on cards */

  /* ---- Metallic gold "foil" — reads as shiny gold, never beige.
     Used for solid buttons/CTAs and (clipped to text) for gold accents. ---- */
  --gold-foil: linear-gradient(135deg, #BF953F 0%, #FCF6BA 26%, #C9A227 50%, #FBF5B7 74%, #AA771C 100%); /* @kind other */
  --gold-foil-hover: linear-gradient(135deg, #D4A94A 0%, #FFF8C8 26%, #E0B62E 50%, #FFF7C2 74%, #C28C28 100%); /* @kind other */
  --gold-button:       var(--gold-foil); /* @kind other */
  --gold-button-hover: var(--gold-foil-hover); /* @kind other */

  /* ---- Near-black surface steps (subtle elevation on the black field) ---- */
  --black-0: #0A0A0D;  /* page base */
  --black-1: #111114;  /* raised card */
  --black-2: #181613;  /* warm raised card (gold-tinted) */
  --black-3: #232019;  /* hover / pressed surface */

  /* ---- White text steps ---- */
  --white-100: #FFFFFF;                  /* headings */
  --white-72:  rgba(255, 255, 255, 0.72);/* body */
  --white-50:  rgba(255, 255, 255, 0.50);/* secondary / captions */
  --white-28:  rgba(255, 255, 255, 0.28);/* disabled / faint */

  /* ---- Semantic aliases ---- */
  --surface-page:    var(--black-0);
  --surface-card:    var(--black-1);
  --surface-card-warm: var(--black-2);
  --surface-raised:  var(--black-3);

  --text-heading: var(--white-100);
  --text-body:    var(--white-72);
  --text-muted:   var(--white-50);
  --text-faint:   var(--white-28);
  --text-accent:  var(--gold);

  --border-hairline: var(--gold-faint);
  --divider:         var(--gold-line);
  --accent:          var(--gold);
}