/* ============================================================================
   World of Pharaos — Token-Schicht (Spec 4.1/4.2, Paket D0 Task 2)

   EIN :root-Block fuer Farben, Masse, Typo, z-Leiter und die Bootstrap-
   Variablen; dazu die lokalen Schriften. Werte 1:1 aus dem Gestaltungsentwurf
   design/mockups-2026-09/mockup.css (Abschnitt 0 TOKENS + 1 TYPO-SKALA).

   Einbindung: als ERSTES Stylesheet NACH Bootstrap in allen drei Geruesten
   (ingamedesign/header.php, startseite/header.php, legal/_layout.php) — alles
   Weitere (custom.css, ingame-layout.css, ui-shell.css, …) laedt danach und
   kann die Tokens benutzen bzw. vorerst ueberschreiben.

   In D0 aenderte diese Datei die Optik NICHT durch eigene Regeln: sie stellte
   nur Werte bereit und bildete die alten Gold-Namen von 2021 als Aliasse ab.
   Die Zielwerte setzt D1 (Shell), die Inhaltsansichten folgen in D5; mit D5c
   sind die Aliasse entfallen (siehe unten, Abschnitt MASSE/z-LEITER).

   Schriften: Inter (400/500/600/700) und Cinzel (600/700), beide SIL OFL 1.1,
   liegen als woff2 unter /fonts/ — Lizenztexte daneben (fonts/LICENSE-Inter.txt,
   fonts/LICENSE-Cinzel.txt). Kein Google-Fonts-Link mehr (Entscheidung D18).
   ========================================================================== */

/* ============================================================================
   SCHRIFTEN — latin + latin-ext getrennt, damit Browser nur laden, was sie
   brauchen. font-display: swap: Text ist sofort lesbar, die Webfont tauscht
   sich nach.
   ========================================================================== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/Inter-Regular-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/Inter-Regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/Inter-Medium-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/Inter-Medium.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/Inter-SemiBold-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/Inter-SemiBold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/Inter-Bold-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/Inter-Bold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/Cinzel-SemiBold-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/Cinzel-SemiBold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/Cinzel-Bold-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/Cinzel-Bold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================================
   TOKENS — 1:1 aus mockup.css, Abschnitt 0
   ========================================================================== */
:root {
    color-scheme: dark;

    /* Flaechen */
    --surface-deep: #050d17;/* Mockup: abgesetzte Abschnitte                         */
    --surface-0: #081321;   /* Nachtblau — Seitengrund, Modal-Schleier, tiefste Nut  */
    --surface-1: #0c1d33;   /* Leisten: Kopfzeile, Ressourcen, Chat, Seitenleisten   */
    --surface-2: #142b4a;   /* Lapis — Karten, Modalflaeche, Tabellenkopf            */
    --surface-3: #1d3a60;   /* gehoben — Hover, Eingabefeld, Spur, aktiver Chip      */

    /* Konturen: 1 px, nie schwerer */
    --line-soft: rgba(175, 186, 201, 0.12);
    --line: rgba(175, 186, 201, 0.20);
    --line-strong: #52647b;

    /* Text */
    --text-1: #f5eedc;      /* Elfenbein — Titel, Werte, wichtige Texte              */
    --text-2: #cbd6e3;      /* Fliesstext im Panel                                   */
    --text-3: #afbac9;      /* Schiefer — Labels, Metadaten                          */
    --text-4: #8494a6;      /* Hilfstext, deaktiviert — nur auf Flaeche 0-2          */

    /* Akzente */
    --gold: #d6ae57;
    --gold-hi: #e8c779;
    --gold-soft: rgba(214, 174, 87, 0.12);
    --gold-line: rgba(214, 174, 87, 0.38);
    --turquoise: #48c5c1;
    --turquoise-soft: rgba(72, 197, 193, 0.14);
    --turquoise-line: rgba(72, 197, 193, 0.45);

    /* Status */
    --success: #80c9a3;     /* Jade — geschuetztes Lager, Erfolg                     */
    --error: #f18b82;       /* Koralle — Fehler, Verlust                             */
    --overflow: #e4a64a;    /* Bernstein — Lagerueberlauf, Warnung                   */
    --danger-face: #7a2e2a; /* Gefahr-Button, Flaeche                                */
    --danger-line: #a8463c;

    /* Rohstoffe — eigene Farbe je Rohstoff, immer mit Symbol UND Text */
    --res-taler: #e9c264;
    --res-nahrung: #93c98c;
    --res-holz: #c9a06a;
    --res-stein: #aebccb;
    --res-metall: #8cb7e2;

    /* Schrift */
    --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-serif: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;

    /* Radien — ruhig, nie mehr als 10 px im Spiel-UI */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;

    /* Schatten — tief und weich, nie farbig */
    --shadow-panel: 0 18px 44px rgba(2, 7, 14, 0.55);
    --shadow-modal: 0 28px 68px rgba(2, 7, 14, 0.72), 0 2px 0 rgba(255, 255, 255, 0.04) inset;
    --shadow-float: 0 8px 22px rgba(2, 7, 14, 0.5);
    /* Einzige farbige Ausnahme: Titelschein ueber dem Hero-Bild der alten
       Startseite (Landing, Paket D6 Fixrunde). Nur dort verwenden. */
    --shadow-title: 0 2px 30px rgba(214, 174, 87, 0.35);
}

/* ============================================================================
   TYPO-SKALA + DICHTE (mockup.css, Abschnitt 1)
   Verbindliche Stufen: 11 / 12 / 13 / 14 / 16 / 20 (+24 nur fuer Seiten- und
   Berichtstitel). Die Dichte ist fest "kompakt" (Entscheidung D2) — sie steht
   deshalb direkt im :root und nicht mehr hinter einer body-Klasse.
   ========================================================================== */
:root {
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-20: 20px;
    --fs-24: 24px;

    /* Dichte: kompakt (fest) */
    --sp-1: 4px;  --sp-2: 6px;  --sp-3: 8px;  --sp-4: 10px; --sp-5: 12px; --sp-6: 16px;
    --lh-body: 1.45;
    --ctl-h: 30px;        /* Buttons, Eingabefelder */
    --row-h: 28px;        /* Tabellen-, Listenzeile */
    --modal-pad: 16px;
    --modal-head-h: 44px;
    --bar-h: 34px;

    /* Titel-Schrift: Cinzel (Entscheidung D1) */
    --font-title: var(--font-serif);
    --title-ls: 0.03em;
}

/* ============================================================================
   MASSE, z-LEITER, BOOTSTRAP, ALIASSE (Spec 4.1/4.3)
   ========================================================================== */
:root {
    /* Masse (Spec 4.1/4.3) */
    --shell-top-h: 52px; --shell-res-h: 40px; --shell-bottom-h: 46px;
    --shell-rail-w: 60px; --shell-panel-w: 320px; --shell-tab-h: 50px;
    --dialog-w-sm: 420px; --dialog-w-md: 560px; --dialog-w-lg: 720px;
    /* Hauptdialoge (Paket D5f): Allianz, Statistik, Markt, Nachrichten, Lager,
       Kaserne, Forschung, Einstellungen — ein Rahmen fuer alle. */
    --dialog-w-xl: 960px;
    --dialog-head-h: 44px; --dialog-pad: 16px;
    /* z-Leiter */
    --z-shell: 1000; --z-sheet: 1050; --z-dialog: 1300; --z-toast: 1400;
    /* Bootstrap auf Tokens */
    --bs-body-bg: var(--surface-0); --bs-body-color: var(--text-2);
    --bs-border-color: var(--line); --bs-primary: var(--turquoise);
    --bs-link-color: var(--turquoise); --bs-modal-bg: var(--surface-2);
    --bs-modal-header-border-color: var(--line-soft); --bs-heading-color: var(--text-1);
    /* Hier standen bis Paket D5c vier Aliasse auf die Alt-Namen von 2021
       (Gold -> var(--gold), Dunkel -> var(--surface-0) usw.). Sie waren die
       Bruecke fuer D0-D5b und sind mit D5c ersatzlos entfallen: der letzte
       Verwender ist weg, und tools/test_design_tokens.php (Pruefung g) laesst
       den alten Namen repo-weit nicht mehr zu. */
}

/* ============================================================================
   BILDSCHIRMGRENZEN — genau zwei (Spec 4.6, Paket D4)

       --bp-phone   (max-width: 767px), (max-height: 500px) and (orientation: landscape)
       --bp-narrow  (max-width: 1279px)

   Sie stehen hier bewusst NUR als Doku: CSS kennt keine Media-Tokens, eine
   Custom Property laesst sich in @media nicht auswerten (@custom-media ist bis
   heute kein Standard). Die verbindlichen Fassungen sind

       ui/js/wop-shell.js   PHONE_QUERY / NARROW_QUERY  (WopShell.isPhone/isNarrow)
       ui/css/wop-shell.css @media, Abschnitt 9

   und tools/test_ui_layout.js vergleicht sie Zeichen fuer Zeichen. Wer eine
   Grenze verschiebt, aendert beide Stellen — der Test faellt sonst durch.

   --bp-phone hat zwei Haelften: schmal (Hochformat) und flach im Querformat.
   Das Querformat ist die Primaeransicht (Entscheidung Valentin, 2026-09-22),
   das Hochformat bleibt bedienbar. Eine DRITTE Grenze gibt es nicht — wer in
   JS eine braucht, ruft WopShell.isPhone() bzw. WopShell.isNarrow().
   ========================================================================== */

/* Typo-Klassen der Skala — bewusst die EINZIGEN Regeln dieser Datei
   (neben body), damit D0 die Optik nicht anfasst. */
.t-11{font-size:11px;line-height:16px}.t-12{font-size:12px;line-height:16px}.t-13{font-size:13px;line-height:18px}
.t-14{font-size:14px;line-height:20px}.t-16{font-size:16px;line-height:22px}.t-20{font-size:20px;line-height:26px}.t-24{font-size:24px;line-height:30px}
.font-serif{font-family:var(--font-serif)}

body{font-family:var(--font-ui);background:var(--surface-0);color:var(--text-2)}