/* Design "Totem" (chosen by Nicolas on 14/10/2026): the price board of a filling station. Charcoal and signal yellow,
   condensed type, prices on dark panels like the LED totems along the road. */

@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-600-normal-W-wyOiI.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-700-normal-C0YPMLn.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-title: "Barlow Condensed", "Arial Narrow", sans-serif;
    --font-logo: "Barlow Condensed", "Arial Narrow", sans-serif;
    --font-price: "Barlow Condensed", "Arial Narrow", sans-serif;
    --title-weight: 700;
    --title-spacing: .01em;
    --logo-spacing: .04em;
    --fuel-case: uppercase;
    --radius: 4px;
    --radius-sm: 3px;

    --bg: #f2f1ed;
    --surface: #ffffff;
    --text: #1d1f22;
    --title: #121417;
    --muted: #5d6167;
    --line: #dcdad3;
    --link: #0d5bd7;
    --link-hover: #083f97;
    --accent: #ffc400;
    --focus: #ffc400;
    --price: #121417;
    --up: #c62828;
    --down: #138a36;
    --best-bg: #ffc400;
    --best-text: #121417;
    --chip-bg: #ebe9e2;
    --chip-text: #2a2d31;

    --header-bg: #16181b;
    --header-text: #ffffff;
    --header-border: 0;
    --btn-bg: #16181b;
    --btn-text: #ffc400;
    --btn-hover: #000000;
    --input-border: 2px solid #16181b;
    --card-border: 1px solid #dcdad3;
    --card-shadow: none;
    --shadow: 0 8px 24px rgba(0, 0, 0, .18);
    --table-head: #f7f6f2;

    --tile-bg: #16181b;
    --tile-text: #ffffff;
    --tile-border: 0;
    --tile-label: #ffc400;
    --tile-price: #ffd84d;

    --chart-1: #16181b;
    --chart-2: #e0a800;
    --chart-3: #0d5bd7;
    --chart-2-dash: 6 4;

    --footer-bg: #16181b;
    --footer-text: #c9c9c9;
    --footer-link: #ffc400;
    --footer-title: #ffffff;
    --footer-line: #2b2e33;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0e0f11;
        --surface: #17191c;
        --text: #e6e6e3;
        --title: #ffffff;
        --muted: #a2a5aa;
        --line: #2b2e33;
        --link: #ffd84d;
        --link-hover: #fff0b3;
        --price: #ffffff;
        --up: #ff6b6b;
        --down: #4ade80;
        --chip-bg: #24272b;
        --chip-text: #e6e6e3;
        --btn-bg: #ffc400;
        --btn-text: #121417;
        --btn-hover: #ffd84d;
        --input-border: 2px solid #3a3e44;
        --card-border: 1px solid #2b2e33;
        --table-head: #1c1f22;
        --tile-bg: #000000;
        --tile-border: 1px solid #2b2e33;
        --chart-1: #ffffff;
        --chart-2: #ffc400;
        --footer-bg: #000000;
    }
}

.site-header { border-bottom: 4px solid var(--accent); }
.logo { text-transform: uppercase; font-size: 1.45rem; }
.site-nav a { text-transform: uppercase; font-family: var(--font-title); font-size: 1.05rem; letter-spacing: .04em; }
h1, h2 { text-transform: uppercase; }
h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
.hero { background: var(--header-bg); color: #fff; margin: 0 -16px; padding: 1.6rem 16px 1.8rem; }
.hero h1 { color: #fff; }
.hero .lead, .hero .hero-meta { color: #c9c9c9; }
.hero .search input { border-color: var(--accent); }
.hero .search button { background: var(--accent); color: #121417; }
.hero .btn-ghost { color: var(--accent); border-color: var(--accent); }
.hero .btn-ghost:hover { background: rgba(255, 196, 0, .12); color: var(--accent); }
.tile { position: relative; }
.tile-price { font-size: 2.1rem; text-shadow: 0 0 12px rgba(255, 196, 0, .35); }
.tile-delta { color: #c9c9c9; }
.tile .up { color: #ff8a80; }
.tile .down { color: #69f0ae; }
.station { border-left: 6px solid var(--accent); }
.station-main .big { font-size: 1.6rem; }
.pill { border-radius: 2px; text-transform: uppercase; letter-spacing: .05em; }
.fact { border-left-width: 6px; }
.fact b { font-size: 1.6rem; }
th { text-transform: uppercase; letter-spacing: .04em; }
.crumbs { text-transform: uppercase; font-size: .75rem; letter-spacing: .05em; }