/* 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;
}

/* ---------------------------------------------------------------------------
 * 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"] { }