/* ══ Orbis ═══════════════════════════════════════════════════════════════
 *
 * Orbis is a game, and it is allowed to look like one. Three ideas carry the
 * whole sheet:
 *
 *   1. **Surfaces are objects, not regions.** A card is a rounded slab with a
 *      2px border sitting on a dotted sheet. It has edges you could pick up.
 *      That is why the borders are thick and the radii are large - a hairline
 *      box reads as a *pane*, and panes are what productivity software is made
 *      of.
 *   2. **A button is a physical thing.** Every button the player presses to
 *      make the world move carries a hard shadow underneath it (`0 3px 0`, no
 *      blur) and travels down into that shadow when pressed. There is no
 *      gradient and no glow doing this work; it is one offset rectangle, which
 *      is why it survives every color we give it.
 *   3. **Color means a system.** Blue is you and the ordinary path; green is
 *      the body and things that grow; gold is money; purple is discovery and
 *      the ballot; orange is hunger and time running out; red is loss. A card
 *      tinted amber is *about* money before a word of it is read.
 *
 * Three faces, three jobs: Fredoka names (titles, the wordmark, a big number),
 * Nunito reads (everything else), IBM Plex Mono counts (anything compared
 * against another number - prices, timers, percentages, quantities).
 *
 * Everything else reads from the tokens in `:root` below. Restyling Orbis - a
 * new accent, a lighter theme, a denser layout - should mean editing this file
 * and nothing else.
 *
 * ── where things live ───────────────────────────────────────────────────
 *
 * The sheet is loaded as an ordered stack of files from `index.html`, and that
 * order *is* the cascade - a file may safely override anything above it and
 * must never rely on overriding something below it. Each file owns its own
 * media queries, at its own foot, so a screen's phone shape is never more than
 * a scroll away from its desktop one.
 *
 *   1  tokens      this file: the palette, the radii, the two bar heights
 *   2  base        the reset, the three faces, links, selection, scrollbars
 *   3  primitives  the slab, the button, the chip, the badge, the grid
 *   4  forms       fields, tick boxes, the drawn dropdown, number spinners
 *   5  controls    sub-tabs, segments, filter chips, the browser's four parts
 *   6  overlays    modals, the ⋯ menus, toasts
 *   7  shell       the sidebar, the page column, the ticker, the nav
 *   8  entry       the way in
 *   9  character   the always-on card: vitals, purse, facts, the bell
 *  10  feed        posts, threads, rich text, embeds, votes, the rail
 *  11  people      profiles, person cards, conversations, reading
 *  12  market      shops, shelves, picking what to sell
 *  13  items       the bag and the workshop
 *  14  work        jobs, ladders, dilemmas, activities, the study desk
 *  15  city        the city banner, investments, buildings
 *  16  staff       the mod feed
 */
:root {
  /* The sheet, and the two slabs that sit on it. The steps between them are
     deliberately *visible*: unlike a dense document, a page of game cards wants
     to be read as a stack of separate objects. */
  --bg: #141726;
  --panel: #1a1e30; --panel-2: #21263c; --panel-3: #2a3050;
  --border: #2e3554; --border-hi: #3d466e;
  /* The quieter rule, for edges that divide rather than enclose. */
  --border-soft: #272d47;
  --text: #e8eaf4; --text-hi: #f2f4fc;
  --muted: #8b92b4; --muted-2: #6b7292; --muted-hi: #9aa1c2;
  /* The ocean of Orbis. The one color allowed to shout, and the darker step
     under it that every blue button stands on. */
  --accent: #4b7bec; --accent-deep: #2d55b8; --accent-2: #7ea6ff;
  /* Quieter than the accent and never a background: what a word inside a
     sentence turns when it is a doorway - a mention, a row that opens. */
  --link: #7ea6ff;
  --on-accent: #ffffff;

  /* Each family is a face, a floor to stand a button on, and a tint pair for
     the panels that belong to that system. Named by *meaning*, so a card says
     what it is about rather than what color it happens to be. */
  --gold: #ffc442; --gold-btn: #b8892a; --gold-deep: #7d5c1a;
  --ok: #58d68d; --ok-btn: #2f9e63; --ok-deep: #1e6b42; --ok-solid: #42c97c;
  --warn: #ff9f43; --warn-2: #ffb26b;
  --err: #ff8a9b; --err-solid: #ff5d73; --err-deep: #b83145;
  --magic: #c2acff; --magic-btn: #8d5bd4; --magic-deep: #5f3a96;
  --cool: #7cc7ee; --cool-btn: #2a75a8; --cool-deep: #1b4d70;

  /* A tinted panel: a card that belongs to one of the systems above. Always a
     pair - the fill and the border that goes round it. */
  --tint-cool: #1c2836; --tint-cool-line: #2b4258;
  --tint-magic: #262038; --tint-magic-line: #40355c;
  --tint-ok: #1d2b28; --tint-ok-line: #2c4a3e;
  --tint-gold: #2b2620; --tint-gold-line: #4a4031;
  --tint-err: #2c1e26; --tint-err-line: #55303c;

  --hunger: #ff9f43; --thirst: #4bb8ec; --stamina: #42c97c;

  /* The ground, on the map. **Deliberately outside the theme system**, in the
     same way `--gold` and `--err` are: this is not chrome, it is a picture of a
     place. A forest that went grey under one theme and green under another
     would be two players looking at different worlds - and unlike a panel
     colour, a map colour is *information*, since the whole of what this screen
     says is said in these nine fills. So no theme re-declares them, and every
     one of them is legible on all four backgrounds.

     Ordered as a ramp: deep water, shallow water, sand, then the greens rising
     into rock and ice. Neighbouring terrains are neighbouring colours, which is
     what makes a coastline read as a coastline rather than as a border - and
     the two that are *not* neighbours anywhere, desert and tundra, are the two
     furthest apart in warmth. The shelf is the one doing the most work: an
     ocean of one flat navy is a hole cut in the page, and a continent with pale
     water around it is something that came out of the sea. */
  --map-ocean: #16324f; --map-shallows: #2d6089; --map-shore: #e3d3a2;
  --map-plains: #7cab55; --map-forest: #2f6b3f; --map-desert: #e0c274;
  --map-tundra: #dde5ef; --map-hills: #9c9660; --map-mountains: #857f8c;
  --map-river: #63b0e0;
  /* Off the edge of the world. Not a map colour - the absence of one - so it is
     ink rather than water: the world has to end somewhere the eye can see, or
     the rim reads as more ocean and the coastline of the world is invisible. */
  --map-void: #0c1017;

  /* Slate rather than the world's own purple: `--magic` is discovery and the
     ballot, which are things you *win*. The staff tab has to sit beside it and
     not be mistaken for it, so it is a colder violet used nowhere else. */
  --staff: #a78bfa; --staff-dim: rgba(167, 139, 250, .14);

  /* Chunky. A 14px radius on a 2px border still reads as a box; these read as
     tokens you could pick up off the table. */
  --r-lg: 15px; --r-md: 11px; --r-sm: 8px; --r-pill: 999px;
  /* The drop every pressable thing stands on, and how far it travels. */
  --lift: 3px;

  --font: "Nunito", system-ui, sans-serif;
  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, monospace;

  /* The two fixed edges of the phone layout. Everything that must not hide
     behind them reads its spacing from here, so the bars can change height
     in one place. */
  --top-h: 54px; --nav-h: 60px;
}

/* ══ themes ══════════════════════════════════════════════════════════════
 *
 * A Premium convenience (§8.1), and the cheapest one in the file to be right
 * about: a theme is **only ever the sheet and the slabs on it**. Every theme
 * below re-declares the neutrals and nothing else, which is what keeps the
 * meaning of color intact - gold is still money, red is still loss, `--accent`
 * is still the ocean of Orbis. A theme that repainted those would not be a
 * theme, it would be a different game with the same rules, and two players
 * looking at the same city would be reading different signals off it.
 *
 * Which is also why this is worth selling and safe to sell. It changes what one
 * person's own screen looks like and nothing about what anybody can do.
 *
 * **Nothing enforces this server-side, on purpose.** A theme is pixels on the
 * player's own machine; there is no state to protect, no advantage to gain and
 * nothing anybody else can see. Putting it in `net::caps` would mean adding a
 * field to the type whose entire job is to list the things that *are* enforced,
 * which would make that list a worse description of itself. The client checks
 * the plan because the offer should be honest, not because a theme needs
 * guarding.
 *
 * Adding one is this file and one entry in `Store::THEMES`. Nothing else.
 */

/* Warmer, lighter, and still night: the palette a lot of people mean when they
   say a dark theme is too blue. */
:root[data-theme="ember"] {
  --bg: #1a1614;
  --panel: #221d1a; --panel-2: #2b2421; --panel-3: #362d28;
  --border: #3a2f29; --border-hi: #4e4038; --border-soft: #322822;
  --text: #f4ece6; --text-hi: #fdf7f2;
  --muted: #b09b8d; --muted-2: #8c7a6e; --muted-hi: #c3b0a2;
}

/* Nearly black, nearly grey. For anybody who wants the interface to get out of
   the way of the art. */
:root[data-theme="slate"] {
  --bg: #101112;
  --panel: #17181a; --panel-2: #1e2023; --panel-3: #26292d;
  --border: #2a2d31; --border-hi: #3a3e44; --border-soft: #232629;
  --text: #e9eaec; --text-hi: #f6f7f8;
  --muted: #8e9296; --muted-2: #6e7276; --muted-hi: #a2a6ab;
}

/* Daylight. The one theme that inverts rather than re-tints, so it re-declares
   the two `--on-*` values as well - a white button face on a white sheet is the
   one thing a lighter palette breaks. */
:root[data-theme="daylight"] {
  --bg: #eef0f7;
  --panel: #ffffff; --panel-2: #f6f7fb; --panel-3: #e9ecf5;
  --border: #cfd5e6; --border-hi: #b3bcd4; --border-soft: #dfe3ef;
  --text: #1b2036; --text-hi: #0d1123;
  --muted: #5f6784; --muted-2: #7e86a1; --muted-hi: #4a5271;
  --accent-2: #2d55b8;
  --link: #2d55b8;
  --tint-cool: #e6f0f9; --tint-cool-line: #bcd4e8;
  --tint-magic: #efeafd; --tint-magic-line: #d2c4f2;
  --tint-ok: #e5f5ec; --tint-ok-line: #b8e0c9;
  --tint-gold: #fbf2df; --tint-gold-line: #ecd7a6;
  --tint-err: #fdeaee; --tint-err-line: #f2c2cd;
}

/* A phone held sideways has no vertical room to give away, so both bars shrink.
   Everything that spaces itself off them follows without being told. */
@media (max-width: 920px) and (max-height: 480px) {
  :root { --top-h: 44px; --nav-h: 46px; }
}