/* ============================================================
   PALLAS SITE THEME — Shared components / chrome
   Link on all 25 pages AFTER pallas_design_tokens.css:

     <link rel="stylesheet" href="/css/pallas_design_tokens.css">
     <link rel="stylesheet" href="/css/pallas_site_theme.css">

   This file contains:
     1. Theme-toggle — single authoritative top-center pill rule
     2. Category-colour utility classes (.cat-brass etc.)

   Per-page unique layout stays in the page's own <style>.
   ============================================================ */


/* ── 1. THEME TOGGLE ──────────────────────────────────────── */
/*
   Top-center pill — avoids bottom-right chatbot widget.
   Full brass border so it reads against the dark nav band.
   Targets [data-pa-theme] — pages dual-set both attributes
   so the light-mode override resolves correctly.
*/
.theme-toggle {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 10000;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 100px;
  font-family: var(--pa-font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; font-variant: all-small-caps;
  color: var(--pa-color-ink-dim);
  background: color-mix(in srgb, var(--pa-color-deep-black) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--pa-color-brass);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  transition: color .2s, border-color .2s;
}
.theme-toggle:hover { color: var(--pa-color-brass); border-color: var(--pa-color-brass-bright); }
.theme-toggle-icon { font-size: 13px; line-height: 1; }
[data-pa-theme="light"] .theme-toggle {
  background: color-mix(in srgb, var(--pa-color-cream) 88%, transparent);
  color: #6E6450; box-shadow: 0 2px 10px rgba(42,36,24,.18);
}


/* ── 2. ICON SPRITE UTILITY ───────────────────────────────── */
/*
   Inline SVG <use> helper. Pairs with /assets/icons/pallas_icons.svg.
   Usage: <svg class="pa-icon"><use href="/assets/icons/pallas_icons.svg#pa-discover"/></svg>
   Size scales with font-size of the container (1em).
   Override stroke-width on large medallion icons (see below).
*/
.pa-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.14em;
  color: var(--pa-color-brass);
}

/* Larger medallions need a lighter stroke so it doesn't feel heavy at 48px */
.flow-step-icon .pa-icon { stroke-width: 1.3; }


/* ── 3. CATEGORY-COLOUR UTILITY CLASSES ──────────────────── */
/*
   Use on text / icon elements that need to adopt a data-series
   colour. The --tint custom property provides a 14% fill that
   badge/pill backgrounds can reference:
     background: var(--tint);

   In dark mode the vars inherit from :root in tokens.css.
   In light mode [data-pa-theme="light"] the tokens.css already
   remaps --cat-* to their light-mode values.
*/
.cat-brass {
  color: var(--cat-brass);
  --tint: color-mix(in srgb, var(--cat-brass) 14%, transparent);
}

.cat-sage {
  color: var(--cat-sage);
  --tint: color-mix(in srgb, var(--cat-sage) 14%, transparent);
}

.cat-indigo {
  color: var(--cat-indigo);
  --tint: color-mix(in srgb, var(--cat-indigo) 14%, transparent);
}

.cat-gold {
  color: var(--cat-gold);
  --tint: color-mix(in srgb, var(--cat-gold) 14%, transparent);
}

.cat-oxblood {
  color: var(--cat-oxblood);
  --tint: color-mix(in srgb, var(--cat-oxblood) 14%, transparent);
}