/* ============================================================================
 * tokens.css — the palette contract.
 *
 * This is the ONE file that gets rewritten to retheme Animas. Everything else
 * consumes these names and never hard-codes a colour, a radius or a shadow.
 *
 * ---------------------------------------------------------------------------
 * THE CONCEPT: a dark room, a lit creature.
 *
 * Animas is a game about mythological things fighting at night. The ground is
 * a deep, slightly violet slate — cool enough to read as dark without going
 * blue-black — and the one brand-weight accent is a warm gold, the spark of
 * the anima itself. Ink is a warm off-white rather than pure white, because
 * pure white on a dark violet ground vibrates and is genuinely tiring to read
 * a move list on.
 *
 * The brand-weight set is five: --bg, --bg-raised, --ink, --accent, --line.
 * Everything else is semantic.
 *
 * ---------------------------------------------------------------------------
 * WHY THIS APP HAS NINE MORE COLOURS THAN THE HOUSE RULE USUALLY ALLOWS
 *
 * The rule is a tight core of five to eight brand-weight colours, with
 * anything beyond that used semantically only. The nine --type-* tokens below
 * are exactly that exception, used correctly: they are DATA, not decoration.
 * A type is the single most load-bearing fact about a character in this
 * game — it decides the movepool, the matchup and half the damage — and nine
 * types with nine consistent colours is how a player reads a board at a
 * glance instead of reading nine words.
 *
 * They are therefore held to a data-colour standard rather than a brand one:
 * each is distinguishable from the other eight, each carries enough contrast
 * against --bg-raised to sit under text, and NONE of them is ever used for a
 * non-type purpose. Do not reach into this block for a button, a highlight or
 * an accent — the moment one of these means two things it stops being data.
 *
 * ---------------------------------------------------------------------------
 * WHY --hp-good / --hp-warn / --hp-bad ARE NOT THE TYPE COLOURS
 *
 * A health bar has to be readable while a Fire character is on screen, and
 * "green means fine, red means nearly dead" is the one place in the interface
 * where red and green carry meaning. They are deliberately separate tokens
 * from --type-fire and --type-grass, even though the hues are close, so that
 * retinting a type can never accidentally retint a health bar. This is the
 * house rule about red and green being semantic and never brand, applied to a
 * screen where a type colour is genuinely competing for the same hue.
 * ========================================================================= */

:root {
  /* --- surfaces: the ramp from page, to raised card, to sunken well ------ */
  --bg:            #14121c;
  --bg-raised:     #1f1c2e;
  --bg-sunken:     #0e0c15;
  --bg-lift:       #2a2640;   /* one more step up, for a surface ON a card */

  /* --- ink: the ramp from body copy, to secondary, to barely-there -------
   * Warm off-white, not #fff. On a violet-slate ground pure white vibrates
   * and a move list becomes tiring to read; #f2ede4 sits about as bright as
   * this background will take. */
  --ink:           #f2ede4;
  --ink-soft:      #b3adc2;
  --ink-faint:     #7d768f;

  /* --- accent: the spark. The thing you press. -------------------------- */
  --accent:          #e8b84b;
  --accent-soft:     #f3cd72;
  --accent-contrast: #14121c;   /* text ON accent */

  /* --- structure --------------------------------------------------------- */
  --line:          #2e2a3e;
  --line-strong:   #453f5c;

  /* --- semantic only. Never brand. See the note above about health. ------ */
  --good:          #58c08a;
  --good-bg:       #16302a;
  --bad:           #e0605f;
  --bad-bg:        #351c22;

  --hp-good:       #58c08a;
  --hp-warn:       #e8b84b;
  --hp-bad:        #e0605f;
  --aura:          #6ea8ef;

  /* --- the nine types. DATA, not decoration. See the note above. --------- */
  --type-fire:     #ef7343;
  --type-water:    #4a9fe0;
  --type-grass:    #63bf6a;
  --type-electric: #f0cf46;
  --type-air:      #86d5d0;
  --type-fighting: #d9704f;
  --type-psychic:  #b57ce0;
  --type-dark:     #8d86a8;
  --type-light:    #f2e2a8;

  /* --- the stage ----------------------------------------------------------
   * The battle is played on a scene rather than in a list: a sky, a horizon,
   * two platforms and two creatures standing on them. These are the scene's
   * own colours. They are close to --bg on purpose — the stage is the same
   * night the rest of the app is set in, lit from the horizon, and the
   * creatures are what carry the colour. `--stage-tint` is overridden per
   * battle by the active field's type colour, which is how "there is a
   * Wildfire burning" reads before the banner is read. */
  --stage-sky:     #1a1730;
  --stage-horizon: #2a2545;
  --stage-ground:  #17142a;
  --stage-tint:    #6f5fb3;

  /* --- glass ---------------------------------------------------------------
   * The status plates on the stage and the message box under it float over
   * the scene rather than sit in it, so they are translucent dark glass with a
   * hairline of light along the top edge — the way a Pokémon datastrip or a
   * Final Fantasy window floats over the field. Nothing else in the app uses
   * these; a card on the page is opaque. */
  --glass:         rgb(12 10 22 / 0.74);
  --glass-edge:    rgb(255 255 255 / 0.08);

  /* --- shape ------------------------------------------------------------- */
  --radius:        18px;
  --radius-sm:     14px;
  --radius-xs:     10px;
  --radius-pill:   999px;

  /* Shadows on a dark ground do almost nothing, so elevation here is carried
   * by the surface ramp and by --line. These stay defined because components
   * .css consumes them; they are deliberately subtle rather than absent so a
   * sheet still detaches from the page. */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.30);
  --shadow-md: 0 2px 8px rgb(0 0 0 / 0.35), 0 12px 28px -14px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 8px 20px rgb(0 0 0 / 0.45), 0 24px 52px -18px rgb(0 0 0 / 0.65);

  /* --- type ---------------------------------------------------------------
   * System stack. A webfont is the only third-party request these apps make,
   * and a mythological display face was not worth one here: the game's
   * identity is carried by the type colours and the creature names, both of
   * which are doing plenty of work already. --font-display stays as the hook
   * if that judgement changes. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", var(--font-body);
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* --- safe areas --------------------------------------------------------
   * Behind variables so every anchored element derives from ONE number, and
   * so a notched device can be faked in a desktop browser while testing.
   *
   * NOTE: --safe-b is the iOS home indicator, NOT a browser URL bar. In a
   * standalone PWA there is no URL bar, so nothing should ever pad on top of
   * this value "just in case".
   */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* --- chrome heights, so content can clear them ------------------------ */
  --topbar-h: 56px;
  --tabbar-h: 58px;
}