/*
 * Feodaris's design tokens: the single place where colours, materials and measures are set. The city
 * view (SVG classes) and the map (read by its controller) draw with them too, so that the day and the
 * night (data-period="night" on <body>, from the world's clock) only redefine this file's values.
 *
 * Direction: a fortified Mediterranean port. Limestone and terracotta, olive groves, a deep sea; the
 * interface is walnut, parchment and aged brass, with wax red for threats and olive green for allies.
 */

@font-face {
    font-family: "Grenze";
    src: url("../fonts/grenze-latin-kTzVyx8.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Grenze Gotisch";
    src: url("../fonts/grenze-gotisch-latin-cyw66xI.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

:root {
    /* ---- World: the sea ---- */
    --sea-deep: #2c566b;
    --sea: #36697f;
    --sea-shallow: #4f8f99;
    --sea-shore: #79b2ad;
    --sea-foam: #e3f0ea;
    --sea-wave: rgb(222 240 236 / 0.42);
    --sea-edge: #1f4153;

    /* ---- World: the land ---- */
    --land: #98a15c;
    --land-light: #aeb576;
    --land-dark: #7c8749;
    --land-dry: #b9ac72;
    --beach: #e6d6a8;
    --cliff: #9b7d55;
    --cliff-dark: #6c5639;
    --earth: #b09468;
    --path: #cdb98d;
    --paving: #d9cdb2;
    --paving-joint: #b7a988;
    --field-1: #d4b65a;
    --field-2: #b9a548;
    --field-3: #a2a856;

    /* ---- World: materials ---- */
    --limestone: #eee4cd;
    --limestone-shade: #cfc1a2;
    --limestone-dark: #ab9d7e;
    --terracotta: #c9663d;
    --terracotta-mid: #a85433;
    --terracotta-dark: #873f27;
    --slate: #727a83;
    --slate-mid: #5b626b;
    --slate-dark: #484e56;
    --timber: #7c5433;
    --timber-dark: #57391f;
    --timber-roof: #94704a;
    --rock: #b3a892;
    --rock-shade: #877d6b;
    --rock-top: #c7bba3;
    --rock-cut: #d8cdb6;
    --foliage: #5a7338;
    --foliage-light: #7d9748;
    --foliage-dark: #3f5528;
    --cypress: #3c5634;
    --olive-leaf: #8d9b66;
    --window: #4a3a2c;
    --smoke: rgb(236 232 222 / 0.75);
    --hose: #4a3a2c;
    --straw: #d8b860;
    --iron: #7c8088;
    --burlap: #b39a6b;
    --mule: #6f5a48;
    --tunic-1: #7b5a8c;
    --tunic-2: #4f7a5a;
    --skin: #d9a77c;
    --flag: #a8281d;
    --sail: #efe6d1;
    --shadow: rgb(38 30 18 / 0.28);

    /* ---- Owners, the same on the city view, the map and the pages ---- */
    --own: #dcaa3e;
    /* Blue for the alliance, orange for the other lords: green and red stay for the pacts and the enemies */
    --ally: #3f78b8;
    --other: #d9822b;
    --pact: #4f8c46;
    --enemy: #b5402d;
    --neutral: #8b9097;

    /* ---- Alliance markers: each kind its colour, set apart from the owners' by their pennant ---- */
    --marker-attack: #a3252c;
    --marker-defend: #2c5d97;
    --marker-take: #7b3f8f;
    --marker-rally: #2f7a4b;
    --marker-note: #efe3c4;

    /* ---- Interface: walnut, parchment, brass, wax ---- */
    --page-bg: #2a1d13;
    --page-ink: #f4e6c2;
    --page-ink-muted: #c7b48f;
    --walnut-light: #6a4628;
    --walnut: #452c19;
    --walnut-edge: #22160c;
    --parchment-center: #f5e9c9;
    --parchment-mid: #e9d7a9;
    --parchment-edge: #d8c08b;
    --parchment-inner: #ecdcb5;
    --parchment-rule: #a3824f;
    --ink: #2c1c0f;
    --ink-muted: #5f4628;
    --line: #cbb283;
    --brass: #c9a24c;
    --brass-light: #ecd08a;
    --brass-dark: #8d6726;
    --iron-light: #8b9095;
    --iron-dark: #565b61;
    --wax: #9b2a1e;
    --wax-ink: #fff1dc;
    --threat: #a3281c;
    --success: #3d6b33;
    --success-bg: #dce5c6;
    --danger: #8a2418;
    --danger-bg: #f0d3c5;
    --warning-bg: #f1e3b3;

    /* ---- Resources ---- */
    --wood: #8a5a2b;
    --stone: #6c727a;
    --gold: #a77d12;
    --population: #3f6f7a;

    /* ---- Measures ---- */
    --radius: 6px;
    --radius-small: 4px;
    /* Height of the top bar and the game navigation, which the city view and the map leave free */
    --chrome-height: 86px;
    --font-title: "Grenze Gotisch", "Grenze", Georgia, serif;
    --font-body: "Grenze", Georgia, serif;
    --shadow-panel: 0 10px 24px rgb(0 0 0 / 0.42);
    --shadow-raised: 0 2px 4px rgb(0 0 0 / 0.45);
    --ease-out: cubic-bezier(.2, .7, .3, 1);

    color-scheme: dark;
}

/*
 * Legacy names, kept so that every page reads the same tokens. Declared on <body>, where the night
 * redefines the tokens: declared on :root, they would keep the day's values.
 */
body {
    --wood-light: var(--walnut-light);
    --wood-dark: var(--walnut);
    --wood-edge: var(--walnut-edge);
    --gilt: var(--brass-light);
    --gilt-light: var(--brass-light);
    --gilt-dark: var(--brass-dark);
    --rivet: var(--brass);
    --city-sea: var(--sea-deep);
}

body[data-period="night"] {
    --sea-deep: #0c1d2a;
    --sea: #10273a;
    --sea-shallow: #1b3d50;
    --sea-shore: #2a5262;
    --sea-foam: #8eaab4;
    --sea-wave: rgb(140 176 196 / 0.22);
    --sea-edge: #08141d;
    --land: #344230;
    --land-light: #3f4e38;
    --land-dark: #2a3627;
    --land-dry: #4a4a36;
    --beach: #5d5946;
    --cliff: #33291e;
    --cliff-dark: #221b13;
    --earth: #4a3f2e;
    --path: #57503e;
    --paving: #5e5848;
    --paving-joint: #4a4538;
    --field-1: #4e4b31;
    --field-2: #45432c;
    --field-3: #3e432c;
    --limestone: #8a8476;
    --limestone-shade: #66604f;
    --limestone-dark: #4f4a3d;
    --terracotta: #7d412b;
    --terracotta-mid: #643322;
    --terracotta-dark: #4d271a;
    --slate: #474d55;
    --slate-mid: #393e45;
    --slate-dark: #2d3137;
    --timber: #46301f;
    --timber-dark: #33231a;
    --timber-roof: #4f3a27;
    --rock: #6c685f;
    --rock-shade: #4e4b45;
    --rock-top: #7d7970;
    --rock-cut: #858072;
    --foliage: #283a20;
    --foliage-light: #33482a;
    --foliage-dark: #1d2b17;
    --cypress: #1f2e1b;
    --olive-leaf: #3d4632;
    --window: #f2bf4c;
    --smoke: rgb(150 150 150 / 0.4);
    --hose: #2a2119;
    --straw: #7d6a38;
    --iron: #4c5057;
    --burlap: #63563d;
    --mule: #3f342a;
    --tunic-1: #4a3755;
    --tunic-2: #2f4a36;
    --skin: #8a6a50;
    --flag: #7a1e17;
    --sail: #8e8875;
    --shadow: rgb(0 0 0 / 0.38);

    --page-bg: #12171c;
    --page-ink: #e8e0cd;
    --page-ink-muted: #a69a83;
    --walnut-light: #3b2b1e;
    --walnut: #221810;
    --walnut-edge: #120c06;
    --parchment-center: #dac8a0;
    --parchment-mid: #c6ae7d;
    --parchment-edge: #aa905f;
    --parchment-inner: #cfba8e;
    --parchment-rule: #7a5e35;
    --line: #a88e5e;
    --brass-light: #efd286;
}