:root {
    --font-heading: "Press Start 2P", monospace;
    --font-body: "VT323", monospace;
    /* Tier 1: default palette */
    --crimson:     #CC2132;
    --tangerine:   #E6692A;
    --amber:       #ED9530;
    --peach:       #E9BD96;
    --olive:       #988A20;
    --teal:        #34685C;
    --navy:        #1E404F;
    --cream:       #FBF3E8;
    --dark_marine: #1e2927;


    /* Tier 2: Semantic Tokens */
    --bg:            var(--cream);
    --surface:       var(--peach);
    --text:          var(--navy);
    --text-muted:    var(--teal);
    --accent:        var(--crimson);
    --accent-hover:  var(--tangerine);
    --highlight:     var(--amber);
    --success:       var(--olive);
    --border:        var(--navy);
    --on-accent:     #ffffff;    

    --content-width: 906px;
  }

/* Dark Theme: Semantics Remapped */

[data-theme="dark"] {
    --bg:            var(--navy);
    --surface:       #17333f;   
    --text:          var(--cream);
    --text-muted:    var(--peach);
    --accent:        var(--amber);
    --accent-hover:  var(--tangerine);
    --border:        var(--olive);
    --on-accent:     var(--dark_marine);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            var(--dark_marine);
    --surface:       var(--cream);
    --banner-bg:     var(--dark_marine);
    --text:          var(--dark_marine);
    --text-muted:    var(--peach);
    --accent:        var(--amber);
    --accent-hover:  var(--tangerine);
    --border:        var(--teal);
    --on-accent:     var(--dark_marine);
  }
}