/* ==========================================================================
   Game Nook — Design Tokens
   Derived from the supplied logo artwork. Colors sampled directly from the
   wordmark PNGs; no color here is invented except the two derived values
   marked below, which exist to solve contrast failures.

   Load this before every other stylesheet. Never hard-code a color in a
   component — always reference a token, or both themes will break.
   ========================================================================== */

:root {
  /* --- Brand colors, sampled from the artwork ------------------------- */
  --gn-purple:        #662D91;  /* wordmark "GAME", cat meeple */
  --gn-green:         #1B9F2D;  /* wordmark "NOOK" */
  --gn-purple-light:  #986FB7;  /* board squares */
  --gn-green-light:   #8AD794;  /* board squares */
  --gn-ink:           #000000;  /* logo outline */
  --gn-paper:         #FFFFFF;  /* logo knockouts */

  /* --- Derived. Not in the artwork; added to fix contrast ------------- */
  --gn-green-ink:     #0F6B1A;  /* 6.43:1 on light — green for TEXT and links */
  --gn-purple-deep:   #40185E;  /* pressed/hover state, deep ground */

  /* --- Neutrals. Biased violet so they sit with the brand ------------- */
  --surface:          #FBFAFD;
  --surface-raised:   #FFFFFF;
  --surface-sunken:   #F2EFF7;
  --border:           #E4DEEC;
  --border-strong:    #C9BEDA;
  --text:             #1C1626;  /* 16.94:1 */
  --text-muted:       #625A6E;  /*  6.30:1 */

  /* --- Semantic roles. Components use THESE, not the brand names ------ */
  --accent:           var(--gn-purple);
  --accent-hover:     var(--gn-purple-deep);
  --accent-on:        #FFFFFF;        /* text on --accent — 8.94:1 */
  --accent-2:         var(--gn-green);      /* fills, chips, board motif */
  --accent-2-text:    var(--gn-green-ink);  /* green used as TEXT */
  --focus:            #B65CD6;

  --ok:               #0F6B1A;
  --warn:             #8A5A00;
  --critical:         #A81E1E;

  /* --- Type ----------------------------------------------------------- */
  --font-display: "Graduate", "Copperplate", Georgia, serif;
  --font-body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step--1: 0.833rem;
  --step-0:  1rem;
  --step-1:  1.2rem;
  --step-2:  1.44rem;
  --step-3:  1.728rem;
  --step-4:  2.074rem;
  --step-5:  2.488rem;

  /* --- Space. 4px base ------------------------------------------------ */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;

  /* --- Radius, shadow, motion ----------------------------------------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --shadow:    0 1px 2px rgba(28, 22, 38, 0.06), 0 4px 16px rgba(28, 22, 38, 0.07);
  --shadow-lift: 0 2px 4px rgba(28, 22, 38, 0.08), 0 12px 32px rgba(28, 22, 38, 0.12);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --measure: 65ch;
}

/* Dark theme. Tokens only — never restyle a component in here. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:        #14101B;
    --surface-raised: #1E1828;
    --surface-sunken: #0D0A12;
    --border:         #322A40;
    --border-strong:  #4A3F5C;
    --text:           #F2EEF7;  /* 16.39:1 */
    --text-muted:     #A79DB5;  /*  7.26:1 */

    /* Brand purple is 2.1:1 on this ground — unusable. Lighten it. */
    --accent:         #B08AD8;  /* 6.67:1 */
    --accent-hover:   #C6A8E6;
    --accent-on:      #14101B;  /* dark text on the light accent */
    --accent-2:       #57D468;  /* 9.84:1 */
    --accent-2-text:  #57D468;
    --focus:          #D89CF5;

    --ok:             #57D468;
    --warn:           #E0B050;
    --critical:       #F08585;

    --shadow:      0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.5);
    --shadow-lift: 0 2px 4px rgba(0,0,0,0.45), 0 12px 32px rgba(0,0,0,0.6);
  }
}

[data-theme="dark"] {
  --surface:        #14101B;
  --surface-raised: #1E1828;
  --surface-sunken: #0D0A12;
  --border:         #322A40;
  --border-strong:  #4A3F5C;
  --text:           #F2EEF7;
  --text-muted:     #A79DB5;
  --accent:         #B08AD8;
  --accent-hover:   #C6A8E6;
  --accent-on:      #14101B;
  --accent-2:       #57D468;
  --accent-2-text:  #57D468;
  --focus:          #D89CF5;
  --ok:             #57D468;
  --warn:           #E0B050;
  --critical:       #F08585;
  --shadow:      0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lift: 0 2px 4px rgba(0,0,0,0.45), 0 12px 32px rgba(0,0,0,0.6);
}

/* --------------------------------------------------------------------------
   Category icons are black-on-transparent PNGs. Rendering them as an <img>
   locks them to black. Rendering them as a CSS mask lets them take any token
   color and adapt to the theme automatically.

   IMPORTANT: point at /assets/icons/mask/, not /assets/icons/. A CSS mask keys
   off the ALPHA channel, so an icon's opaque white fill (the card face in the
   TCG icon) would mask as solid and lose all its interior detail. The mask/
   copies are alpha-only silhouettes derived from ink darkness.

     <span class="gn-icon" style="--icon:url(/assets/icons/mask/trading-card-games.png)"></span>

   Replace with inline SVG when vector originals arrive — same class, sharper.
   -------------------------------------------------------------------------- */
.gn-icon {
  display: inline-block;
  width: var(--icon-size, 3rem);
  aspect-ratio: 1;
  background-color: currentColor;
  -webkit-mask-image: var(--icon);
          mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}