/* QuadBlock — Color tokens
 * A warm-editorial palette fusing Team8's optimistic cream/navy/cyan with
 * WIRED's stark black-label contrast. Base ramps first, semantic aliases below.
 */
:root {
  /* ---- Paper / cool neutrals (crisp white world) ---- */
  --paper:        #FFFFFF;  /* primary page background — clean white */
  --paper-2:      #F4F6F8;  /* recessed surfaces, alternating bands */
  --paper-3:      #EAEDF1;  /* hairline fills, disabled wells */
  --sand:         #DCE0E6;  /* deepest cool neutral / strong dividers */

  /* ---- Ink / cool neutrals (Team8 deep navy) ---- */
  --ink:          #14182B;  /* primary text, navy surfaces */
  --ink-2:        #272D49;  /* raised navy surface */
  --ink-3:        #4A5170;  /* secondary text on paper */
  --ink-4:        #7E849B;  /* muted text, captions, placeholders */
  --hairline:     #E4E7EC;  /* default border on white */
  --hairline-ink: rgba(255,255,255,0.14); /* border on navy */

  /* ---- Brand ---- */
  --sky:          #34BFEA;  /* Team8 signature cyan — primary brand */
  --sky-deep:     #1AA3D4;  /* cyan pressed / hover */
  --sky-soft:     #CDEFFA;  /* cyan tint fill */
  --cobalt:       #2C49D6;  /* deep electric blue — secondary brand */
  --cobalt-deep:  #1E37AC;
  --cobalt-soft:  #DCE2FB;
  --ember:        #F4894C;  /* warm orange — sparing accent */
  --ember-deep:   #E06E2D;
  --ember-soft:   #FBDFCB;

  /* ---- Stark (WIRED label block) ---- */
  --black:        #0A0A0A;  /* tag/label blocks, max-contrast type */
  --white:        #FFFFFF;

  /* ---- Semantic status ---- */
  --pine:         #2E7D5B;  /* success / confirmed (parks heritage) */
  --pine-soft:    #D6E9DF;
  --amber:        #C98A1E;  /* warning */
  --amber-soft:   #F6E7C4;
  --rust:         #C0432B;  /* error / destructive */
  --rust-soft:    #F4D8D1;

  /* ================= SEMANTIC ALIASES ================= */
  --surface-page:      var(--paper);
  --surface-sunken:    var(--paper-2);
  --surface-card:      var(--white);
  --surface-ink:       var(--ink);
  --surface-ink-2:     var(--ink-2);
  --surface-brand:     var(--sky);
  --surface-brand-2:   var(--cobalt);

  --text-strong:       var(--ink);
  --text-body:         var(--ink-2);
  --text-muted:        var(--ink-3);
  --text-subtle:       var(--ink-4);
  --text-on-ink:       #EDEBF2;
  --text-on-ink-muted: #A6ABC2;
  --text-on-brand:     var(--ink);   /* navy text reads well on cyan */
  --text-link:         var(--cobalt);

  --border-default:    var(--hairline);
  --border-strong:     var(--ink);
  --border-on-ink:     var(--hairline-ink);

  --focus-ring:        var(--cobalt);
}