/* =============================================================================
   WoWYourself — PALETTES
   -----------------------------------------------------------------------------
   All six Collector's Shelf palettes, kept so the site's colours can be changed
   without touching a single component.

   HOW TO CHANGE THE SITE'S COLOURS
   Edit one line in assets/js/palette.js:  SITE_PALETTE = 'ink-cream'

   Valid names: ink-cream · bubblegum · midnight-gold · arcade-blue
                soft-serve · tangerine-pop

   Nothing else in the site should ever hard-code a colour. Components read
   these tokens only, which is what makes a palette swap free.

   THE TOKENS
     --field        page background
     --on-field     text sitting on --field
     --ink          structural dark: borders, buttons, offset shadows
     --on-ink       text sitting on --ink
     --card         panel / product-box background
     --on-card      text sitting on --card
     --accent       eyebrows, highlights, badges
     --on-accent    text sitting on --accent
     --window       product-window tint inside the box
     --logo-ink       logo outline      (consumed by assets/img/logo*.svg)
     --logo-knockout  logo letterforms
     --logo-tile      favicon tile background

   Every palette defines the full set, so a component can never end up reading a
   token that only exists in one of them.
   ========================================================================== */

/* --- ACTIVE: Ink & Cream ---------------------------------------------------
   The bare :root copy is the no-JS fallback. If SITE_PALETTE in palette.js is
   ever changed, update this selector to match so visitors without JavaScript
   see the same colours.
   ------------------------------------------------------------------------ */
:root,
html[data-palette="ink-cream"] {
  --field:        #EFE9DC;
  --on-field:     #17181A;
  --ink:          #17181A;
  --on-ink:       #FFFFFF;
  --card:         #FFFFFF;
  --on-card:      #17181A;
  --accent:       #B4341F;
  --on-accent:    #FFFFFF;
  --window:       #DDD6C6;
  --logo-ink:      #17181A;
  --logo-knockout: #EFE9DC;
  --logo-tile:     #B4341F;
}

html[data-palette="bubblegum"] {
  --field:        #F04E8C;
  --on-field:     #FFF1E4;
  --ink:          #241338;
  --on-ink:       #FFC93C;
  --card:         #FFF1E4;
  --on-card:      #241338;
  --accent:       #FFC93C;
  --on-accent:    #241338;
  --window:       #3DD9B0;
  --logo-ink:      #241338;
  --logo-knockout: #FFF1E4;
  --logo-tile:     #FFC93C;
}

html[data-palette="midnight-gold"] {
  --field:        #171A44;
  --on-field:     #FFF6E3;
  --ink:          #0C0E28;
  --on-ink:       #E8B33C;
  --card:         #FFF6E3;
  --on-card:      #0C0E28;
  --accent:       #E8B33C;
  --on-accent:    #0C0E28;
  --window:       #2E3370;
  --logo-ink:      #0C0E28;
  --logo-knockout: #FFF6E3;
  --logo-tile:     #E8B33C;
}

html[data-palette="arcade-blue"] {
  --field:        #2545E8;
  --on-field:     #FFFFFF;
  --ink:          #0B1030;
  --on-ink:       #FFD400;
  --card:         #FFFFFF;
  --on-card:      #0B1030;
  --accent:       #FFD400;
  --on-accent:    #0B1030;
  --window:       #8FA8FF;
  --logo-ink:      #0B1030;
  --logo-knockout: #FFFFFF;
  --logo-tile:     #FFD400;
}

html[data-palette="soft-serve"] {
  --field:        #86D9C0;
  --on-field:     #14382F;
  --ink:          #14382F;
  --on-ink:       #FFFBF0;
  --card:         #FFFBF0;
  --on-card:      #14382F;
  --accent:       #D9542A;
  --on-accent:    #FFFBF0;
  --window:       #FFE9D6;
  --logo-ink:      #14382F;
  --logo-knockout: #FFFBF0;
  --logo-tile:     #FF9E7A;
}

html[data-palette="tangerine-pop"] {
  --field:        #F26522;
  --on-field:     #FFF3E0;
  --ink:          #2B1508;
  --on-ink:       #FFD98A;
  --card:         #FFF3E0;
  --on-card:      #2B1508;
  --accent:       #FFD98A;
  --on-accent:    #2B1508;
  --window:       #17A398;
  --logo-ink:      #2B1508;
  --logo-knockout: #FFF3E0;
  --logo-tile:     #FFC94A;
}