/* Theme tokens for the redesigned interface.
 *
 * Every screen reads only the custom properties declared here. Nothing else in the
 * redesign may name a colour, a radius or a font family directly — that is the whole
 * point of the layer. A city picks a theme and the ground, panels, rules, all five
 * text levels, the corner radius and the display face change together.
 *
 * Deep Lagoon is the default and lives on :root so a page with no data-theme still
 * renders. The other six are [data-theme="..."] blocks. Every preset must declare
 * every token: an omission does not fall back to the default, it inherits whatever
 * the cascade last set, which is how a half-themed page happens.
 * tests/test_theme_tokens.py enforces that.
 *
 * Values are from design_handoff_future_cities/README.md, which is authoritative.
 *
 * The interface accent (--fc-accent) is deliberately separate from the cash colour.
 * They were the same token once and it meant recolouring "cash" also recoloured every
 * border and button on the page.
 *
 * Loaded after styles.css so these can override Bootstrap. Bootstrap itself stays —
 * the accordions and modals are driven by its JavaScript.
 */

/* Deep Lagoon is both the default and a theme with a name.
 *
 * The name matters because the City Atlas renders each city's card in that city's
 * own theme by putting data-theme on the card. A card for a team that never chose
 * would otherwise inherit whoever is looking at it, and show their theme rather than
 * its own. Two selectors on one block rather than a copy, so the two cannot drift. */
:root,
[data-theme="deep-lagoon"] {
    /* ---- Deep Lagoon (default) ---- */
    --fc-bg: #051217;
    --fc-panel: #061419;
    --fc-surface: rgba(9, 29, 37, 0.6);
    --fc-surface-alt: rgba(8, 26, 33, 0.5);
    --fc-header: linear-gradient(160deg, #0d2f3c 0%, #071a22 60%, #061419 100%);
    --fc-line: rgba(120, 220, 235, 0.16);
    --fc-line-soft: rgba(120, 220, 235, 0.09);
    --fc-text: #eaf7f9;
    --fc-soft: #dceef1;
    --fc-muted: #9fbfc7;
    --fc-dim: #7fa3ad;
    --fc-faint: #6f98a3;
    --fc-display: 'Gugi', 'Tomorrow', sans-serif;
    --fc-radius: 14px;
    --fc-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
    --fc-display-scale: 1;
    --fc-accent: #4fe0d8;
    --fc-cash: #4fe0d8;
    --fc-land: #8fd3ff;
    --fc-profit: #ffc46b;
    --fc-sustain: #7ee08a;

    /* ---- Shared across every theme ---- */

    /* Tomorrow is the UI face throughout. Only the display face changes per theme. */
    --fc-ui: 'Tomorrow', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Heading sizes. --fc-display-scale multiplies them for themes whose face runs
       large; only Atomic Age uses it. The clamp on phone is in the size itself so a
       long city name cannot push the header off a 390px screen. */
    --fc-h1: calc(34px * var(--fc-display-scale));
    --fc-h1-home: calc(44px * var(--fc-display-scale));

    /* Inner elements sit at roughly 0.6x the card radius, pills are their own thing. */
    --fc-radius-inner: calc(var(--fc-radius) * 0.6);
    --fc-radius-pill: 999px;
}

@media (max-width: 1199px) {
    :root {
        --fc-h1: calc(28px * var(--fc-display-scale));
        --fc-h1-home: calc(34px * var(--fc-display-scale));
    }
}

@media (max-width: 699px) {
    :root {
        --fc-h1: calc(24px * var(--fc-display-scale));
        --fc-h1-home: calc(28px * var(--fc-display-scale));
    }
}

[data-theme="clean-room"] {
    --fc-bg: #eef1f3;
    --fc-panel: #ffffff;
    --fc-surface: #f6f8f9;
    --fc-surface-alt: #fafbfc;
    --fc-header: linear-gradient(160deg, #ffffff 0%, #f4f7f8 100%);
    --fc-line: rgba(15, 40, 50, 0.14);
    --fc-line-soft: rgba(15, 40, 50, 0.07);
    --fc-text: #0f2630;
    --fc-soft: #254453;
    --fc-muted: #4d6b78;
    --fc-dim: #6b8794;
    /* #8aa2ac in the handoff, darkened by 11/255 to clear WCAG AA. Against
       Clean Room's white panel the original scored 2.68:1, under the 3.0 floor
       for secondary text, and this token carries timestamps and hint lines that
       students read on a phone in a lit classroom. Still lighter than --fc-dim
       above it, so the five text levels stay distinguishable. */
    --fc-faint: #7f97a1;
    --fc-display: 'Baumans', 'Tomorrow', sans-serif;
    --fc-radius: 6px;
    --fc-shadow: 0 20px 50px rgba(15, 40, 50, 0.1);
    --fc-display-scale: 1;
    --fc-accent: #0f766e;
    --fc-cash: #0f766e;
    --fc-land: #1d6fa5;
    --fc-profit: #b26a00;
    --fc-sustain: #2f7d42;
}

[data-theme="overgrowth"] {
    --fc-bg: #0a1410;
    --fc-panel: #0e1c15;
    --fc-surface: rgba(24, 48, 34, 0.55);
    --fc-surface-alt: rgba(18, 38, 27, 0.5);
    --fc-header: linear-gradient(160deg, #1c3a26 0%, #102117 60%, #0e1c15 100%);
    --fc-line: rgba(168, 220, 150, 0.18);
    --fc-line-soft: rgba(168, 220, 150, 0.09);
    --fc-text: #f0f7ea;
    --fc-soft: #dcecd0;
    --fc-muted: #a8c49a;
    --fc-dim: #8aa87d;
    --fc-faint: #728f66;
    --fc-display: 'Baumans', 'Tomorrow', sans-serif;
    --fc-radius: 20px;
    --fc-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
    --fc-display-scale: 1;
    --fc-accent: #8fd66b;
    --fc-cash: #d9b64e;
    --fc-land: #7fc4a0;
    --fc-profit: #f0a35e;
    --fc-sustain: #8fd66b;
}

[data-theme="blueprint"] {
    --fc-bg: #0d2033;
    --fc-panel: #102942;
    --fc-surface: rgba(16, 54, 86, 0.6);
    --fc-surface-alt: rgba(13, 44, 71, 0.5);
    --fc-header: linear-gradient(160deg, #16406a 0%, #0f2c48 60%, #102942 100%);
    --fc-line: rgba(160, 205, 240, 0.22);
    --fc-line-soft: rgba(160, 205, 240, 0.11);
    --fc-text: #eaf3fb;
    --fc-soft: #cfe3f5;
    --fc-muted: #9fbdd8;
    --fc-dim: #7fa2c2;
    --fc-faint: #6b8dab;
    --fc-display: 'Iceland', 'Tomorrow', sans-serif;
    --fc-radius: 2px;
    --fc-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
    --fc-display-scale: 1;
    /* Cash is #ffffff here, which would be an invisible button against the panel,
       so the interface accent takes the land blue instead. */
    --fc-accent: #8fd3ff;
    --fc-cash: #ffffff;
    --fc-land: #8fd3ff;
    --fc-profit: #ffd97a;
    --fc-sustain: #8ce8c4;
}

[data-theme="neon-sprawl"] {
    --fc-bg: #08060f;
    --fc-panel: #0e0a1a;
    --fc-surface: rgba(28, 16, 52, 0.6);
    --fc-surface-alt: rgba(20, 12, 38, 0.55);
    --fc-header: linear-gradient(160deg, #2a0f45 0%, #14082a 60%, #0e0a1a 100%);
    --fc-line: rgba(255, 90, 200, 0.24);
    --fc-line-soft: rgba(255, 90, 200, 0.11);
    --fc-text: #f6ecff;
    --fc-soft: #e4d2f5;
    --fc-muted: #b394cf;
    --fc-dim: #8f74ab;
    --fc-faint: #755d8f;
    --fc-display: 'Iceland', 'Tomorrow', sans-serif;
    --fc-radius: 3px;
    --fc-shadow: 0 40px 90px rgba(120, 0, 180, 0.35);
    --fc-display-scale: 1;
    --fc-accent: #ff5ac8;
    --fc-cash: #00f0ff;
    --fc-land: #ff5ac8;
    --fc-profit: #ffe14d;
    --fc-sustain: #7dff9b;
}

[data-theme="brass-and-steam"] {
    --fc-bg: #161009;
    --fc-panel: #20180e;
    --fc-surface: rgba(58, 42, 24, 0.6);
    --fc-surface-alt: rgba(44, 32, 18, 0.55);
    --fc-header: linear-gradient(160deg, #4a3418 0%, #2a1e10 60%, #20180e 100%);
    --fc-line: rgba(214, 168, 94, 0.26);
    --fc-line-soft: rgba(214, 168, 94, 0.12);
    --fc-text: #f6ecd9;
    --fc-soft: #e8d7b8;
    --fc-muted: #c0a67f;
    --fc-dim: #a08a68;
    --fc-faint: #877354;
    --fc-display: 'Baumans', 'Tomorrow', sans-serif;
    --fc-radius: 10px;
    --fc-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
    --fc-display-scale: 1;
    --fc-accent: #e0b356;
    --fc-cash: #e0b356;
    --fc-land: #b98f5e;
    --fc-profit: #e08a4a;
    --fc-sustain: #9db56a;
}

[data-theme="atomic-age"] {
    --fc-bg: #f2e6d2;
    --fc-panel: #fbf3e4;
    --fc-surface: #f4e7d2;
    --fc-surface-alt: #f8eeda;
    --fc-header: linear-gradient(160deg, #f7d9a8 0%, #fbf0dc 100%);
    --fc-line: rgba(60, 40, 25, 0.2);
    --fc-line-soft: rgba(60, 40, 25, 0.09);
    --fc-text: #2b1c10;
    --fc-soft: #43301e;
    --fc-muted: #6d5237;
    --fc-dim: #8a6c4c;
    --fc-faint: #a2855f;
    /* Quoted, or the stack silently falls back — the family name has digits and
       spaces and an unquoted 'Press Start 2P' is not a valid identifier. */
    --fc-display: 'Press Start 2P', 'Tomorrow', sans-serif;
    --fc-radius: 18px;
    --fc-shadow: 0 20px 50px rgba(60, 40, 25, 0.18);
    /* Press Start 2P has a huge apparent size for its point size. */
    --fc-display-scale: 0.6;
    --fc-accent: #c2410c;
    --fc-cash: #c2410c;
    --fc-land: #1d6f8a;
    --fc-profit: #b8860b;
    --fc-sustain: #3f7d43;
}

/* Inner World Dark. The mind as a room you run from a console: dusk-violet walls,
   each stat its own feeling-colour. Warmest of the dark themes.
   The accent is gold, not the cash colour. Red is kept out on purpose, because
   it reads as a loss next to money. */
[data-theme="inner-world-dark"] {
    --fc-bg: #17122f;
    --fc-panel: #1f1840;
    --fc-surface: rgba(58, 42, 120, 0.35);
    --fc-surface-alt: rgba(48, 36, 100, 0.3);
    --fc-header: linear-gradient(165deg, #3a2a78 0%, #251c52 55%, #1f1840 100%);
    --fc-line: rgba(190, 170, 255, 0.2);
    --fc-line-soft: rgba(190, 170, 255, 0.1);
    --fc-text: #f6f2ff;
    --fc-soft: #e2dafc;
    --fc-muted: #c3b8ea;
    --fc-dim: #a99cd6;
    --fc-faint: #9084bd;
    --fc-display: 'Baumans', 'Tomorrow', sans-serif;
    --fc-radius: 20px;
    --fc-shadow: 0 40px 90px rgba(20, 6, 60, 0.55);
    --fc-display-scale: 1;
    --fc-accent: #ffd23f;
    --fc-cash: #b28bff;
    --fc-land: #5c9dff;
    --fc-profit: #ff9a3d;
    --fc-sustain: #6fdc6a;
}

/* Inner World Light. A daylight archive: lavender-cream ground, very round
   corners, the stat colours the only saturated things on the page.
   Stat hues are darker than in Dark so they still read as text on the pale panel.
   Easiest to read on a projector. */
[data-theme="inner-world-light"] {
    --fc-bg: #efe7fb;
    --fc-panel: #fffdf9;
    --fc-surface: #f7f2ff;
    --fc-surface-alt: #fbf8ff;
    --fc-header: linear-gradient(165deg, #efe6ff 0%, #fbf6ff 60%, #fffdf9 100%);
    --fc-line: rgba(70, 50, 120, 0.14);
    --fc-line-soft: rgba(70, 50, 120, 0.07);
    --fc-text: #241c3d;
    --fc-soft: #3b3160;
    --fc-muted: #544878;
    --fc-dim: #665a8c;
    --fc-faint: #7c70a0;
    --fc-display: 'Baumans', 'Tomorrow', sans-serif;
    --fc-radius: 24px;
    --fc-shadow: 0 24px 60px rgba(70, 50, 120, 0.14);
    --fc-display-scale: 1;
    --fc-accent: #6d3fe0;
    --fc-cash: #6d3fe0;
    --fc-land: #2862d4;
    --fc-profit: #b35c00;
    --fc-sustain: #2a7d35;
}

/* ---------------------------------------------------------------------------
 * Primitives
 *
 * The small number of rules that every screen shares. Anything screen-specific
 * belongs with that screen, not here.
 *
 * .fc-panel and .fc-surface used to live here and were never used by anything:
 * .fc-section in fc.css does the same job and every screen reached for that
 * instead. Two ways to draw a card is one too many.
 * --------------------------------------------------------------------------- */

.fc-themed {
    background: var(--fc-bg);
    color: var(--fc-text);
    font-family: var(--fc-ui);
}

.fc-h1 {
    font-family: var(--fc-display);
    font-size: var(--fc-h1);
    color: var(--fc-text);
    margin: 0;
}

/* 10-11px uppercase with wide tracking, the label style used throughout. */
.fc-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fc-dim);
}

/* Every numeric readout. Without tabular figures a changing number jitters as its
   digits change width, which is very visible in a stat that animates. */
.fc-num {
    font-family: var(--fc-display);
    font-variant-numeric: tabular-nums;
    color: var(--fc-text);
}

.fc-cash { color: var(--fc-cash); }
.fc-land { color: var(--fc-land); }
.fc-profit { color: var(--fc-profit); }
.fc-sustain { color: var(--fc-sustain); }

/* Touch targets are 44px on anything below desktop. */
@media (max-width: 1199px) {
    .fc-tap {
        min-height: 44px;
        min-width: 44px;
    }
}

@media (min-width: 1200px) {
    .fc-tap {
        min-height: 34px;
    }
}

/* ---------------------------------------------------------------------------
 * Custom themes
 *
 * A custom theme is four independent choices rather than a palette: a ground, a
 * heading face, a corner radius and five accent colours. The first three are
 * attributes, so the colour values stay in this file rather than being stored per
 * city and written into inline styles. Only the five accents are per-city, and
 * those do arrive inline — five validated hex values, nothing else.
 *
 * Grounds supply the same tokens a preset does, minus the display face, the radius
 * and the accents. Layered under [data-theme="custom"], which sets no colours of
 * its own so a ground is never fighting a preset.
 * --------------------------------------------------------------------------- */

[data-ground="deep"] {
    --fc-bg: #051217;
    --fc-panel: #061419;
    --fc-surface: rgba(9,29,37,0.6);
    --fc-surface-alt: rgba(8,26,33,0.5);
    --fc-header: linear-gradient(160deg, #0d2f3c 0%, #071a22 60%, #061419 100%);
    --fc-line: rgba(255,255,255,0.14);
    --fc-line-soft: rgba(255,255,255,0.07);
    --fc-text: #eaf7f9;
    --fc-soft: #dceef1;
    --fc-muted: #9fbfc7;
    --fc-dim: #8aa8b0;
    --fc-faint: #6f98a3;
    --fc-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

[data-ground="slate"] {
    --fc-bg: #12181c;
    --fc-panel: #181f24;
    --fc-surface: rgba(40,52,60,0.55);
    --fc-surface-alt: rgba(32,42,49,0.5);
    --fc-header: linear-gradient(160deg, #2b3a44 0%, #1c252b 60%, #181f24 100%);
    --fc-line: rgba(255,255,255,0.13);
    --fc-line-soft: rgba(255,255,255,0.07);
    --fc-text: #eef2f4;
    --fc-soft: #dde4e8;
    --fc-muted: #adbac2;
    --fc-dim: #94a4ad;
    --fc-faint: #7d8d96;
    --fc-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

[data-ground="ink"] {
    --fc-bg: #08060f;
    --fc-panel: #0e0a1a;
    --fc-surface: rgba(30,20,52,0.6);
    --fc-surface-alt: rgba(22,14,38,0.55);
    --fc-header: linear-gradient(160deg, #2a0f45 0%, #14082a 60%, #0e0a1a 100%);
    --fc-line: rgba(255,255,255,0.14);
    --fc-line-soft: rgba(255,255,255,0.07);
    --fc-text: #f4eeff;
    --fc-soft: #e2d6f2;
    --fc-muted: #b6a3cd;
    --fc-dim: #9c8bb3;
    --fc-faint: #83759a;
    --fc-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

[data-ground="paper"] {
    --fc-bg: #eef1f3;
    --fc-panel: #ffffff;
    --fc-surface: #f5f8f9;
    --fc-surface-alt: #fafbfc;
    --fc-header: linear-gradient(160deg, #ffffff 0%, #f2f6f7 100%);
    --fc-line: rgba(15,40,50,0.14);
    --fc-line-soft: rgba(15,40,50,0.07);
    --fc-text: #0f2630;
    --fc-soft: #254453;
    --fc-muted: #4d6b78;
    --fc-dim: #5f7d8a;
    --fc-faint: #7d95a0;
    --fc-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

[data-ground="cream"] {
    --fc-bg: #f2e6d2;
    --fc-panel: #fbf3e4;
    --fc-surface: #f4e7d2;
    --fc-surface-alt: #f8eeda;
    --fc-header: linear-gradient(160deg, #f7d9a8 0%, #fbf0dc 100%);
    --fc-line: rgba(60,40,25,0.2);
    --fc-line-soft: rgba(60,40,25,0.09);
    --fc-text: #2b1c10;
    --fc-soft: #43301e;
    --fc-muted: #6d5237;
    --fc-dim: #7d6144;
    --fc-faint: #9a7d58;
    --fc-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

[data-ground="moss"] {
    --fc-bg: #0a1410;
    --fc-panel: #0f1d16;
    --fc-surface: rgba(26,50,36,0.55);
    --fc-surface-alt: rgba(19,39,28,0.5);
    --fc-header: linear-gradient(160deg, #1c3a26 0%, #102117 60%, #0f1d16 100%);
    --fc-line: rgba(255,255,255,0.13);
    --fc-line-soft: rgba(255,255,255,0.07);
    --fc-text: #f0f7ea;
    --fc-soft: #dcecd0;
    --fc-muted: #a8c49a;
    --fc-dim: #93b085;
    --fc-faint: #7a9770;
    --fc-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

[data-ground="rust"] {
    --fc-bg: #180d0a;
    --fc-panel: #22120d;
    --fc-surface: rgba(66,32,22,0.6);
    --fc-surface-alt: rgba(50,25,17,0.55);
    --fc-header: linear-gradient(160deg, #4d2415 0%, #2a150e 60%, #22120d 100%);
    --fc-line: rgba(255,255,255,0.14);
    --fc-line-soft: rgba(255,255,255,0.07);
    --fc-text: #fceee6;
    --fc-soft: #f0d9cb;
    --fc-muted: #c9a493;
    --fc-dim: #b08d7c;
    --fc-faint: #957465;
    --fc-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

[data-ground="cobalt"] {
    --fc-bg: #050c2e;
    --fc-panel: #0a1547;
    --fc-surface: rgba(24,44,122,0.6);
    --fc-surface-alt: rgba(16,32,92,0.55);
    --fc-header: linear-gradient(160deg, #1a2f8f 0%, #0b1550 60%, #0a1547 100%);
    --fc-line: rgba(255,255,255,0.16);
    --fc-line-soft: rgba(255,255,255,0.08);
    --fc-text: #eef1ff;
    --fc-soft: #d6ddff;
    --fc-muted: #a6b2ee;
    --fc-dim: #8f9de0;
    --fc-faint: #7a88cc;
    --fc-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

[data-ground="blush"] {
    --fc-bg: #f7e4e6;
    --fc-panel: #fdf1f2;
    --fc-surface: #f9e6e9;
    --fc-surface-alt: #fbecee;
    --fc-header: linear-gradient(160deg, #f3c9d0 0%, #fdeff1 100%);
    --fc-line: rgba(90,30,45,0.18);
    --fc-line-soft: rgba(90,30,45,0.08);
    --fc-text: #3a1420;
    --fc-soft: #5a2333;
    --fc-muted: #844a58;
    --fc-dim: #9a6270;
    --fc-faint: #af7f8a;
    --fc-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

[data-ground="mint"] {
    --fc-bg: #d9f2e8;
    --fc-panel: #ecfaf4;
    --fc-surface: #ddf3ea;
    --fc-surface-alt: #e5f7ef;
    --fc-header: linear-gradient(160deg, #b8e8d6 0%, #edfaf5 100%);
    --fc-line: rgba(10,70,55,0.18);
    --fc-line-soft: rgba(10,70,55,0.08);
    --fc-text: #06291f;
    --fc-soft: #124435;
    --fc-muted: #3a6b5b;
    --fc-dim: #4f8072;
    --fc-faint: #6a9689;
    --fc-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

/* Heading faces. Quoted where the family name needs it, and each carrying its own
   scale — Press Start 2P runs enormous for its point size. */
[data-face="gugi"]    { --fc-display: 'Gugi', 'Tomorrow', sans-serif; --fc-display-scale: 1; }
[data-face="iceland"] { --fc-display: 'Iceland', 'Tomorrow', sans-serif; --fc-display-scale: 1.05; }
[data-face="baumans"] { --fc-display: 'Baumans', 'Tomorrow', sans-serif; --fc-display-scale: 1; }
[data-face="pixel"]   { --fc-display: 'Press Start 2P', 'Tomorrow', sans-serif; --fc-display-scale: 0.6; }

[data-corners="sharp"] { --fc-radius: 2px; }
[data-corners="soft"]  { --fc-radius: 10px; }
[data-corners="round"] { --fc-radius: 22px; }

/* Custom sets no colours itself; the ground, face and corner attributes do. Named
   so a custom city's card in the Atlas is not left inheriting whoever is looking. */
[data-theme="custom"] { }