/* ============================================================================ * 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: warm paper, and ink that has had time to dry. * * Animas was a dark room with a lit creature in it for its whole first life — * a deep violet slate with a gold spark on it. It is now the opposite: sand * and parchment, brown ink, and a bronze-gold accent. Retheme requested on * 2026-09-09 on one word, "soothing", and that word is the brief. Nothing * here is trying to glow. The page is the colour of an old board game's box * lid, the cards are the colour of the rules booklet inside it, and the * creatures are the only saturated things on the screen. * * The brand-weight set is still five: --bg, --bg-raised, --ink, --accent, * --line. Everything else is semantic. * * --------------------------------------------------------------------------- * WHAT CHANGED STRUCTURALLY WHEN THE GROUND WENT LIGHT * * A dark theme and a light theme are not the same design with the numbers * flipped, and three things had to move: * * 1. DEPTH COMES FROM SHADOW NOW, NOT FROM GLOW. On a dark ground a halo of * the creature's own colour reads as "this is lifted". On paper a halo * reads as a smudge, and the thing that reads as lifted is a soft shadow * underneath. The shadows below therefore do real work where before they * were nearly decorative — and they are WARM, mixed from brown rather than * black, because a neutral shadow on a warm ground looks like dirt. * The rule this replaces is in CLAUDE.md and its point survives intact: * depth is still never a 1px line around everything. Do not add borders * back to define the stage, the plates or the move grid. * * 2. THE SURFACE RAMP INVERTED. --bg-raised is LIGHTER than --bg here, not * darker: on paper a raised card catches the light. --bg-sunken is the * only one that still goes the same way it did, because a well is a well. * * 3. THE SCRIMS BECAME TOKENS. Roughly eighty `rgb(255 255 255 / …)` and * `rgb(0 0 0 / …)` literals were scattered through components.css and * battle.css — the top-edge highlights and the shadow washes that a dark * theme is built out of. They now read --sheen-rgb and --shade-rgb, so * this file really is the only one a retheme touches. The alphas were left * exactly as they were authored; only the two colours behind them moved. * * --------------------------------------------------------------------------- * 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. * * THE NINE WERE ALL REMIXED FOR PAPER, and it was not a lightening pass — it * was the reverse. The dark theme's types were bright because they sat on * near-black; on cream the same colours vanish, so every one of them went * darker and more saturated. Measured against the standard the paragraph * above sets: the weakest contrast on --bg-raised is Light at 3.18:1 and the * closest pair is Fire/Fighting at ΔE 19.4 — which is a WIDER separation than * the dark palette ever had, where that same pair sat at 13.4. * * THE HARD PART WAS THAT THE GROUND IS NOW GOLD. Electric, Light and the * accent were three shades of one colour the moment the page turned to sand. * They are pulled apart on two different axes: the accent went dark and brown * (a bronze, ΔE 38 from Electric and 28 from Light), Electric went to a cool * lemon-olive and Light to a warm amber. Do not "tidy" Electric back toward * yellow-gold; that hue is spoken for by the page it is printed on. * * --------------------------------------------------------------------------- * 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 ------ * Note the direction: on paper the RAISED surface is the lighter one. */ --bg: #efe4d3; /* warm sand — the box lid */ --bg-raised: #fbf5ea; /* parchment — the card on it */ --bg-sunken: #e2d5bf; /* a well pressed into the sand */ --bg-lift: #fffdf8; /* one more step up, for a surface ON a card */ /* --- ink: the ramp from body copy, to secondary, to barely-there ------- * Dark warm brown, not #000. Pure black on a warm ground reads as a hole * punched in the paper; a brown-black sits in it. #382c1e is 10.8:1 on the * page and 12.5:1 on a card, so it is comfortably past the point where more * contrast stops being more legible. */ --ink: #382c1e; --ink-soft: #6a5844; --ink-faint: #94836d; /* --- accent: the spark. The thing you press. -------------------------- * A bronze rather than a bright gold, and that is forced rather than * chosen: this token has to do two opposite jobs on a light theme. It is * the fill of a button whose label must read on it (7.35:1 against * --accent-contrast) AND it is the colour of accent TEXT printed on the * page (6.18:1 against --bg). A bright gold satisfies the first and fails * the second. Going dark satisfies both, and has the side benefit of * pulling the accent clear of the two gold TYPE colours. */ --accent: #74490f; --accent-soft: #97631a; --accent-contrast: #fff8ea; /* text ON accent */ /* --- structure --------------------------------------------------------- */ --line: #ded0b6; --line-strong: #c3ad86; /* --- semantic only. Never brand. See the note above about health. ------ */ --good: #3f7f52; --good-bg: #dcead9; --bad: #b4443f; --bad-bg: #f3dcd6; --hp-good: #3f7f52; --hp-warn: #b8802a; --hp-bad: #b4443f; --aura: #2f6fb0; /* --- the four stat bars, for the same reason --hp-* exists ------------- * These used to be borrowed straight off the type palette: Power drew in * --type-fighting and Speed in --type-air, which is exactly the borrowing * the header of this file forbids. A character sheet prints its own type * pips two inches above these bars, so a Fighting character was showing the * same red twice for two unrelated reasons, and retinting a type would have * silently retinted a stat. * * SPEED IS YELLOW on the designer's call, 2026-09-11, where it was the teal * of --type-air. It is the one of the four that cannot be made to clear 3:1 * against its own track, and that is the page rather than the choice: this * theme's ground IS gold, which is the same wall the icon's colour pass and * the Electric/Light/accent split both hit. What it has instead is * separation in hue — ΔE 63 from the track, ahead of the teal's 46 and level * with Power's 63 — so it reads as clearly as the other three do while * being, unlike them, a light colour on a light ground. The track was * lightened from a 0.4 wash to 0.16 in the same pass to buy what luminance * it could. If it ever needs to be more legible, take the track lighter * still; do not darken this into an ochre, which is the accent's hue. */ --stat-hp: #3f7f52; --stat-power: #a6452c; --stat-speed: #bd8800; --stat-aura: #2f6fb0; /* --- the eleven types. DATA, not decoration. See the note above. ------- * EARTH AND LOVE ARRIVED ON 2026-09-13 AND THREE OF THE OLD NINE MOVED WITH * THEM. Adding a brown is not a free act on a parchment theme — brown is * already spoken for twice over, by `--accent` and by `--ink-soft` — and * adding it while Fighting was itself a red-brown was not possible at all. * So the designer's instruction was the right one: Fighting takes orange, * Earth takes the brown. Fire had to go deeper red to make room, because an * orange Fighting lands on top of the old Fire otherwise. * * MEASURED, in the same ΔE76 this file's own standard is written in. Every * one of the eleven clears 3:1 on --bg-raised (the weakest three are Light * at 3.22, Fighting at 3.24 and Electric at 3.38 — the same band the old * nine sat in). And the palette came out BETTER separated than the nine it * replaced: the closest pair was Fire/Fighting at 19.4 and is now * Fighting/Light at 22.1. * * THE ONE REAL CASUALTY IS EARTH AGAINST THE ACCENT, at ΔE 19.8. Twelve * browns were swept and every one of them lands between 14 and 26 of * `--accent`; a bronze-brown like #6f4b2e is 15.9 from the accent and, worse, * 12.2 from `--ink-soft`, which is too close to secondary text for a pip to * survive. A red CLAY is the only brown that clears both, which is why this * one is a terracotta rather than a soil. The clean way out, if it ever * matters more than it does today, is moving `--accent` off brown — it only * went there to clear the two gold TYPE colours, and Earth is now a third * reason to look at it again. */ --type-fire: #bf2f16; --type-water: #1f6ba8; --type-grass: #3d8433; --type-electric: #8a8a10; --type-air: #2f8a86; --type-fighting: #cf7008; --type-psychic: #7b41ab; --type-dark: #4f4860; --type-light: #b2801f; --type-earth: #a15334; --type-love: #c42a70; /* PRISM IS THE ONE TYPE WITH NO COLOUR, and that is the design rather than a * gap I did not fill. It is the type that has no matchups — every cell of * the chart reads x1 in both directions — and the honest way to draw "every * colour and none" on a page where the other eleven are each a hue is to * give it the page's own ink. A twelfth colour would say "one more type"; * the absence of one says what the type actually is, at a glance, with no * legend to read. * * IT ALSO SIDESTEPS THE PALETTE PROBLEM THIS THEME KEEPS HAVING. The * parchment ground has already forced three colours — Electric and Light * against the accent, Speed's yellow, Earth's terracotta — and the closest * type-vs-type pair is ΔE 22.1. A twelfth hue would have to find room inside * that, and there is not much. */ --type-prism: var(--ink); /* --- 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, and the scene changed time of day with the theme — it was a * violet night lit from the horizon and it is now late afternoon on dry * ground. They stay close to --bg on purpose: the stage is the same * afternoon the rest of the app is set in, 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: #f7e9cf; --stage-horizon: #e9d3a6; --stage-ground: #d9c08e; --stage-tint: #b8802a; /* --- glass --------------------------------------------------------------- * The status plates on the stage and the message box under it float over * the scene rather than sit in it. On the dark theme that was smoked glass * with a hairline of light along its top edge; on paper it is the opposite * material — a pale vellum overlay with a hairline of shadow. Nothing else * in the app uses these; a card on the page is opaque. */ --glass: rgb(255 251 243 / 0.82); --glass-edge: rgb(90 66 30 / 0.14); /* --- the two scrims, behind everything else ---------------------------- * Every top-edge highlight and every shadow wash in components.css and * battle.css is `rgb(var(--sheen-rgb) / a)` or `rgb(var(--shade-rgb) / a)`. * Keeping them here is what makes this file the only one a retheme has to * touch — and it is the difference between a light theme and a dark theme * with the surfaces swapped, because the SHADE is what carries depth now. * It is brown rather than black on purpose: a neutral shadow on a warm * ground reads as dirt rather than as depth. */ --sheen-rgb: 255 255 255; --shade-rgb: 92 66 30; /* And a third, which only a light theme needs. --sheen is a LIGHT SOURCE — * the hairline along the top edge of a card, the specks in the sky — and it * stays white in both themes because that is what light is. --wash is a * different job that happened to be spelled the same way on the dark theme: * the barely-there tint that lifts a small element (a tag, a turn counter, * the sheet's grab handle) off the surface behind it. On black, lifting * something means adding light. On paper it means adding ink, so this one * inverts where --sheen does not. Nine of these were white-on-dark and are * now brown-on-cream; the alphas are unchanged because the two read at about * the same strength at the same value. */ --wash-rgb: 92 66 30; /* --- shape ------------------------------------------------------------- */ --radius: 18px; --radius-sm: 14px; --radius-xs: 10px; --radius-pill: 999px; /* Shadows do real work here, where on the dark theme they did almost none * and elevation was carried by the surface ramp instead. They are warm and * they are soft: a hard shadow on a light interface reads as a sticker. */ --shadow-sm: 0 1px 2px rgb(var(--shade-rgb) / 0.13); --shadow-md: 0 2px 8px rgb(var(--shade-rgb) / 0.13), 0 12px 28px -14px rgb(var(--shade-rgb) / 0.28); --shadow-lg: 0 8px 20px rgb(var(--shade-rgb) / 0.16), 0 24px 52px -18px rgb(var(--shade-rgb) / 0.34); /* --- 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; }