/* BATTLE BUGS — the palette and the display face, once, for both apps —
 * [[Theme and Color]].
 *
 * Loaded by the account app (ui/src/assets/css/design-system.css imports
 * it and builds its components on these names) AND by the static game
 * pages (index.html, embed.html, help.html, lab.html link it from the site
 * root). Two apps, one palette, or it drifts within a month — the rule the
 * vault wrote before either app had a palette, and the reason no page
 * carries a hex literal of its own any more.
 *
 * The values are HSL triplets consumed as hsl(var(--x)), so an opacity
 * variant is hsl(var(--x) / 0.85) and costs no second token. Dark is the
 * DEFAULT: the game is a lit jar in a dark room. `:root.light` is the
 * account app's light theme; the game page never adds the class, because
 * the game stays dark in both themes.
 *
 * WHICH PALETTE. Amber on near-black navy — #f4b860 and #14202d were taken
 * from index.html when the account app was tuned to look like the game
 * (2026-08). The vault's Theme and Color page argues for WARM neutrals
 * instead; that call is the owner's and it is in Open Questions. When it
 * is made, this file is the only place it changes.
 */

/* THE DISPLAY FACE. Dela Gothic One (SIL OFL 1.1; shared/fonts/README.md
 * says where it came from) stands in for Knockout Sumo, which is a
 * commercial face. The owner chose it on 2026-09-28. It is for DISPLAY
 * only: the wordmark, headings, buttons, tabs, badges and big numbers.
 * Running text stays in the app's body face, and the jar's log and stat
 * readouts stay monospaced.
 *
 * It lives here for the same reason the palette does. Both apps read this
 * file, so they cannot use two different faces. The url is relative to this
 * file. The static pages fetch it from /shared/fonts/ on our own domain.
 * The account app's build (Vite) follows the same url and ships a hashed
 * copy with its bundle. Neither app asks a third party for it.
 *
 * The weight is a RANGE on purpose. The face has one weight, and it is
 * already the heaviest on the page. A rule that asks for 600 or 700
 * would otherwise get a painted-on fake bold that smears the counters, so
 * every weight maps to the real glyphs. `swap`: text shows at once in the
 * fallback, then swaps. The fallbacks are heavy, wide faces that most
 * devices already have, so the page keeps its weight until the swap. */
@font-face {
  font-family: 'Dela Gothic One';
  src: url('./fonts/DelaGothicOne-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-display: 'Dela Gothic One', 'Arial Black', Impact, system-ui, sans-serif;

  /* Surfaces — the jar at night */
  --background: 210 32% 12%;        /* #14202d */
  --foreground: 210 10% 90%;
  --card: 210 25% 17%;
  --card-foreground: 210 10% 92%;

  /* Amber: the banner, the level-up flash, the lamp over the jar */
  --accent: 36 87% 66%;             /* #f4b860 */
  --accent-foreground: 210 32% 12%;
  --primary: 36 87% 66%;
  --primary-foreground: 210 32% 12%;

  --secondary: 210 22% 22%;
  --secondary-foreground: 210 10% 90%;
  --muted: 210 20% 20%;
  --muted-foreground: 210 10% 63%;   /* 4.7:1 on the raised surfaces (58% was 4.2) */

  /* Status. Destructive is the hemolymph red the game throws on damage. */
  --success: 152 55% 45%;
  --destructive: 6 78% 58%;         /* #ef6a5a */
  --destructive-ink: 6 90% 74%;     /* red TEXT on a card: 4.5:1 where #ef6a5a is 3.9 */
  --destructive-fill: 6 72% 44%;    /* a red button white text can sit on (5.5:1) */
  --success-ink: 152 55% 58%;       /* badge text on its own tint */
  --info-ink: 196 80% 68%;
  --warning: 33 90% 55%;
  --info: 196 70% 55%;

  --border: 210 18% 26%;
  --input: 210 22% 20%;
  --ring: 36 87% 66%;
  --radius: 0.625rem;

  --sidebar-background: 210 38% 9%;
  --sidebar-foreground: 210 10% 82%;
  --sidebar-primary: 36 87% 66%;
  --sidebar-accent: 210 25% 17%;

  --shadow-soft: 0 2px 8px hsla(210, 40%, 4%, 0.4);
  --shadow-medium: 0 4px 16px hsla(210, 40%, 4%, 0.5);
  --shadow-strong: 0 8px 32px hsla(210, 40%, 4%, 0.6);
  --gradient-primary: linear-gradient(135deg, #14202d 0%, #f4b860 220%);

  /* THE JAR'S OWN. What the game page and the HUD need beyond the app's
   * set — the amber's hover and glow, the health and stamina bars, a
   * secondary hover, a softer text than muted. Named for their ROLE, so
   * a palette change moves them together with everything above. */
  --accent-hover: 37 100% 74%;      /* #ffce7d — the primary button, hovered */
  --accent-deep: 36 45% 51%;        /* #b98c4a — meters, badges */
  --accent-glow: 44 100% 83%;       /* #ffe8a8 — the level-up peak */
  --secondary-hover: 213 13% 23%;   /* #363c46 */
  --foreground-soft: 213 12% 72%;   /* #aeb6c0 — between text and muted */
  --hud-health: 110 43% 56%;        /* #6fbf5f — the bar that matters */
  --hud-stamina: 194 43% 56%;       /* #5fa8bf */
  --success-soft: 110 17% 25%;      /* #3c4a35 — the READY button's ground */
  --destructive-text: 6 100% 83%;   /* #ffb3a7 — the LEAVE button's label */
}

/* Light, for anyone who wants it. Kept a warm off-white rather than pure
 * white so amber still reads as amber against it. */
:root.light {
  --destructive-ink: 6 72% 40%;     /* red text on white, 4.5:1+ */
  --destructive-fill: 6 72% 44%;
  --success-ink: 152 65% 28%;
  --info-ink: 196 85% 30%;
  --background: 40 20% 96%;
  --foreground: 210 25% 20%;
  --card: 0 0% 100%;
  --card-foreground: 210 25% 20%;
  --accent: 33 80% 47%;
  --accent-foreground: 0 0% 100%;
  --primary: 33 80% 47%;
  --primary-foreground: 0 0% 100%;
  --secondary: 40 16% 92%;
  --secondary-foreground: 210 25% 20%;
  --muted: 40 16% 93%;
  --muted-foreground: 210 12% 42%;
  --border: 40 14% 84%;
  --input: 40 16% 94%;
  --sidebar-background: 210 32% 12%;
  --sidebar-foreground: 210 10% 88%;
  --secondary-hover: 40 16% 88%;
  --foreground-soft: 210 15% 35%;
}

/* REDUCED MOTION — [[Accessibility]]. Every page links this file, so one
   rule here honours the device's setting everywhere the site animates:
   transitions and CSS animations collapse to an instant. The game's own
   motion (camera, flourishes) has its setting in controls.js, which
   follows the device the same way; this is the document around it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}