/* ============================================================
   RYNA · COLOR
   Deep navy carries the brand. Metallic gold is reserved for the
   mark, key accents, and moments of emphasis — never body text or
   large fills (keep gold to ~10% of any composition).
   ============================================================ */
:root {
  /* —— Navy ramp (brand spine) —— */
  --navy-abyss:    #08101D; /* deepest — vial backgrounds, footers */
  --navy-900:      #0B1730; /* primary brand surface */
  --navy-midnight: #101F3C; /* core navy */
  --navy-800:      #13254A; /* gradient partner / raised on dark */
  --navy-700:      #1C2C4A; /* hairline borders on dark */
  --navy-600:      #2A3C60; /* disabled / muted strokes on dark */

  /* —— Metallic gold (accent only) —— */
  --gold-deep:     #9C6531; /* gradient start, pressed gold */
  --gold:          #CFA15A; /* canonical accent */
  --gold-soft:     #E7C892; /* gradient mid */
  --gold-light:    #F2DCAD; /* gradient highlight, hover */
  --champagne:     #ECCF9E; /* tint fills, subtle gold washes */

  /* —— Warm neutrals (light grounds) —— */
  --paper:         #F6F4EF; /* page background — warm, never stark white */
  --linen:         #F0EEE7; /* alt light surface */
  --surface-light: #FBFAF6; /* raised card on paper */
  --mist:          #EDEFF2; /* cool light — text/UI on navy */
  --mist-deep:     #DDE2EA; /* mist border on navy */

  /* —— Ink / text neutrals —— */
  --ink:           #20232A; /* primary text on light */
  --ink-soft:      #3C3F46; /* body text */
  --muted:         #5B5E66; /* secondary text */
  --faint:         #8C887E; /* captions, meta — warm grey */
  --border:        #E2DFD7; /* hairlines on light */
  --border-soft:   #ECEAE2; /* faint dividers */

  /* —— Cool-blue text used on navy —— */
  --slate-on-navy: #8FA0BE; /* secondary text on navy */
  --slate-soft:    #AEB8C8; /* tertiary text on navy */

  /* —— Semantic —— */
  --success:       #1E7A4F;
  --success-bg:    #EAF3EE;
  --danger:        #B0413A;
  --danger-bg:     #FAF1F1;
  --warning:       #A8742E; /* also the "eyebrow gold" label color */
  --warning-bg:    #FBF4E9;
  --info:          #2F4D86;
  --info-bg:       #EEF2F8;

  /* —— Gradients —— */
  --grad-gold:  linear-gradient(100deg,#9C6531 0%,#E7C892 38%,#CFA15A 60%,#F2DCAD 100%); /* @kind color */
  --grad-navy:  linear-gradient(135deg,#0B1730 0%,#13254A 100%); /* @kind color */
  --grad-navy-soft: linear-gradient(160deg,#0B1730 0%,#162a4c 100%); /* @kind color */

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */
  --bg-page:          var(--paper);
  --surface-card:     #FFFFFF;
  --surface-raised:   var(--surface-light);
  --surface-sunken:   var(--linen);
  --surface-navy:     var(--navy-900);
  --surface-navy-2:   var(--navy-800);

  --text-primary:     var(--ink);
  --text-body:        var(--ink-soft);
  --text-secondary:   var(--muted);
  --text-muted:       var(--faint);
  --text-on-navy:     var(--mist);
  --text-on-navy-dim: var(--slate-on-navy);

  --accent:           var(--gold);
  --accent-strong:    var(--gold-deep);
  --accent-tint:      var(--champagne);
  --eyebrow:          var(--warning); /* uppercase label gold on light */

  --border-default:   var(--border);
  --border-strong:    #D2CEC3;
  --border-on-navy:   var(--navy-700);

  --focus-ring:       rgba(207,161,90,0.45); /* gold, low-alpha */
  --focus-ring-navy:  rgba(207,161,90,0.6);
}