/* ============================================================================
   AMARI BANDZ — design tokens. Single source of truth for the site.
   ios/AmariBandz/Theme.swift mirrors this file value for value; change both.

   Load this FIRST, before styles.css and before any page's own <style>.

   Naming: these names describe ROLE, not hue. The previous system shipped
   --pink holding #b6ff2e and --violet holding a green, which is how the site
   and the iOS app silently drifted onto two different brands.
   ========================================================================== */

:root {
  /* ---- ground ---------------------------------------------------------- */
  --ink:          #05060A;   /* page ground. cooler than the old #070503 so the
                                amber ray reads as light rather than mud */
  --ink-raised:   #0C0E14;   /* the only raised surface: sheets, docks, skeletons.
                                flat fill — never translucent, never blurred */
  --ink-scrim:    rgba(5, 6, 10, 0.72);

  /* ---- rules ----------------------------------------------------------- */
  --edge:         rgba(244, 239, 230, 0.10);
  --edge-strong:  rgba(244, 239, 230, 0.22);

  /* ---- text ------------------------------------------------------------ */
  --fg:           #F4EFE6;   /* warm cream. never #fff for text */
  --fg-2:         #A9A49B;   /* 8.17:1 on ink */
  --fg-3:         #8C877E;   /* 5.67:1 on ink — the contrast floor.
                                replaces --text-mute, which was 3.66:1 and failed */

  /* ---- the acid green: this brand's lead accent ------------------------ */
  --signal:       #B6FF2E;
  --signal-press: #9AE81C;
  --signal-deep:  #5FAE1F;   /* ember green. the far stop of display-type gradients,
                                so the wordmark stays green end to end rather than
                                fading into bronze */
  --on-signal:    #05060A;   /* MANDATORY foreground on any --signal fill.
                                #fff on --signal is 1.21:1 — it shipped for
                                months on .btn--shop and was unreadable */

  /* ---- era atmosphere, sampled from the DYSTOPIA cover ------------------ */
  --haze:         #E08A3C;   /* the god-ray amber. ATMOSPHERE ONLY, 4–17% alpha,
                                never a solid fill, never carries text */
  /* Was #C79A6B, a cover-title gold. There is no gold in this brand any more —
     era headings are the acid green. Kept as an alias rather than deleted so a
     page still asking for it renders green, instead of an unset colour that
     falls back to inherited text. */
  --bronze:       var(--signal);

  /* ---- state ----------------------------------------------------------- */
  --alert:        #FF5C3B;

  /* ---- geometry -------------------------------------------------------- */
  --radius:       0px;       /* structure and imagery are square */
  --radius-pill:  999px;     /* exactly two things: cart count, live dot */

  /* ---- measure --------------------------------------------------------- */
  --max-w:        1240px;
  --max-w-prose:  680px;
  --gutter:       clamp(18px, 4vw, 56px);

  /* ---- motion ---------------------------------------------------------- */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:     140ms;
  --dur:          260ms;
  --dur-slow:     420ms;

  /* ---- DEPRECATED ALIASES ----------------------------------------------
     Every page still referencing the old names keeps working while pages are
     migrated one at a time. Delete this block once grep for these is clean. */
  --pink:         var(--signal);
  --violet:       var(--bronze);
  --cyan:         var(--fg);
  --bg-0:         var(--ink);
  --bg-1:         var(--ink);
  --bg-2:         var(--ink-raised);
  --text:         var(--fg);
  --text-dim:     var(--fg-2);
  --text-mute:    var(--fg-3);
  --line:         var(--edge);
  --line-2:       var(--edge-strong);
  --radius-sm:    var(--radius);
  --shadow:       none;
}


/* ---- self-hosted type -------------------------------------------------
   Served from our own origin: no third-party request on the critical path,
   and no page can end up with different type because it forgot a <link>.
   -------------------------------------------------------------------- */
/* Archivo, Cinzel and JetBrains Mono each shipped as several files that are
   BYTE-IDENTICAL (verified by md5): Archivo-400/500/600/700/800 are the same
   35 KB five times over. Every weight kept its own URL, so a page using three
   weights downloaded the same bytes three times. Each family now points every
   weight at one URL — one fetch, reused for all faces. Rendering is unchanged
   because the files were already the same. */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ArchivoBlack-400.woff2') format('woff2');}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Anton-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/Archivo-400.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Cinzel-400.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Cinzel-400.woff2') format('woff2');}
@font-face{font-family:'Jet Brains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/JetBrainsMono-400.woff2') format('woff2');}
@font-face{font-family:'Jet Brains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/JetBrainsMono-400.woff2') format('woff2');}

/* ---- atmosphere -----------------------------------------------------------
   Three fixed layers, no animation, no blurred blobs: an amber ray from above
   (the album's key light), an acid-green ground glow, and grain over a vignette.
   The old version animated three 600px blurred divs at 140px blur, which is a
   full-viewport composite every frame for the life of the page.
   -------------------------------------------------------------------------- */
.mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--ink);
}

.mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(54% 78% at 50% -12%,
      rgba(224, 138, 60, 0.17), rgba(224, 138, 60, 0.05) 45%, transparent 72%),
    radial-gradient(46% 42% at 50% 108%,
      rgba(182, 255, 46, 0.10), transparent 68%);
}

.mesh::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(125% 125% at 50% 42%, transparent 55%, rgba(0, 0, 0, 0.62) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: cover, 128px 128px;
  opacity: 0.16;
  mix-blend-mode: soft-light;
}

@media (prefers-reduced-transparency: reduce) {
  .mesh::after { display: none; }
}

/* ---- focus ----------------------------------------------------------------
   This system removes nearly every border, fill and shadow, which is exactly
   what keyboard focus normally borrows to be visible. So focus gets its own
   non-negotiable rule, and it is never removed per-component.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--signal);
  color: var(--on-signal);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}