/* ============================================================
   WNN Properties — Color Tokens
   Light theme. Neutral ramp + 3 chromatic palettes.
   Base values (raw scales) + semantic aliases.
   Ramps run shade-1 (lightest) → shade-7 (darkest).
   ============================================================ */
:root {
  /* ---------- Neutral ---------- */
  --neutral-0:  #FFFFFF;
  --neutral-1:  #F2F2F2;
  --neutral-2:  #D9D9DA;
  --neutral-3:  #B3B4B5;
  --neutral-4:  #808384;
  --neutral-5:  #4D5252;
  --neutral-6:  #1B2021;
  --neutral-7:  #020809;
  --white:      #FFFFFF;

  /* ---------- Eastern Blue (PRIMARY / brand teal) ---------- */
  --eastern-blue-1: #E9F4F7;
  --eastern-blue-2: #D3EAEF;
  --eastern-blue-3: #65B5C9;
  --eastern-blue-4: #2396B3; /* primary */
  --eastern-blue-5: #1C788F;
  --eastern-blue-6: #0E3C47;
  --eastern-blue-7: #0A2D35;

  /* ---------- Fuel Yellow (SECONDARY / energetic accent) ---------- */
  --fuel-yellow-1: #FDF7E9;
  --fuel-yellow-2: #FCF0D4;
  --fuel-yellow-3: #F4CA69;
  --fuel-yellow-4: #F0B429; /* primary */
  --fuel-yellow-5: #C09020;
  --fuel-yellow-6: #604810;
  --fuel-yellow-7: #48360C;

  /* ---------- Lynch (slate / muted support) ---------- */
  --lynch-1: #EFF2F4;
  --lynch-2: #DFE5EA;
  --lynch-3: #91A4B6;
  --lynch-4: #627D98; /* primary */
  --lynch-5: #4E6479;
  --lynch-6: #27323C;
  --lynch-7: #1D252D;

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */

  /* Brand */
  --brand:           var(--eastern-blue-4);
  --brand-hover:     var(--eastern-blue-5);
  --brand-active:    var(--eastern-blue-6);
  --brand-subtle:    var(--eastern-blue-1);
  --brand-subtle-2:  var(--eastern-blue-2);
  --brand-on:        var(--white);

  --accent:          var(--fuel-yellow-4);
  --accent-hover:    var(--fuel-yellow-5);
  --accent-subtle:   var(--fuel-yellow-2);
  --accent-on:       var(--neutral-7);

  /* Text */
  --text:            var(--neutral-7);
  --text-muted:      var(--neutral-5);
  --text-subtle:     var(--neutral-4);
  --text-on-brand:   var(--white);
  --text-inverse:    var(--white);
  --text-link:       var(--eastern-blue-4);

  /* Surfaces */
  --surface:         var(--neutral-0);
  --surface-1:       var(--neutral-1);
  --surface-card:    var(--neutral-0);
  --surface-inverse: var(--neutral-7);
  --surface-brand:   var(--eastern-blue-4);

  /* Borders & lines — the "edgy" near-black hairline is a brand signature */
  --border:          var(--neutral-7);
  --border-subtle:   var(--neutral-2);
  --border-strong:   var(--neutral-7);
  --divider:         var(--neutral-7);

  /* Semantic status */
  --success:   #1C788F;
  --warning:   var(--fuel-yellow-4);
  --danger:    #C0392B;
  --info:      var(--eastern-blue-4);

  /* Focus ring */
  --focus-ring: var(--eastern-blue-4);
}