/* ─── Fob Watch — Tokens ─────────────────────────────────────────────────────
   Zwei Gesichter, eine Palette. Die Werkbank steht auf Vortex-Blauschwarz,
   die Uhr auf Zifferblatt-Elfenbein — dieselben Farben, nur getauschte
   Rollen, damit beide Seiten erkennbar zum selben Ding gehoeren.

   --ember ist reserviert: Cloister Bell und Time Lock, sonst nichts. Eine
   Farbe, die nur bei echten Ereignissen auftaucht, wird auch gelesen. */

:root {
    --vortex:      #0E1418;
    --vortex-hoch: #161E24;   /* angehobene Flaechen auf der Werkbank */
    --vortex-kante:#233039;

    --brass:       #C6A24A;
    --brass-hell:  #E0C374;
    --patina:      #4E7A6E;
    --bone:        #E8E2D4;
    --bone-tief:   #D8D0BE;
    --ember:       #B4462B;

    --tinte:       #1A1512;   /* Text auf hellem Grund */
    --tinte-leise: #6B6156;

    /* Fraunces traegt den mechanischen Gravurcharakter, Archivo ist die
       schmale, standfeste Stimme der Bedienoberflaeche. Beide werden in
       Phase 1 mitgeliefert; bis dahin greifen die Systemschriften, damit
       die CSP eng bleiben kann und nichts von aussen nachgeladen wird. */
    --schrift-display: Fraunces, "Iowan Old Style", "Palatino Linotype",
                       Palatino, Georgia, serif;
    --schrift-ui:      Archivo, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;

    --rund-klein: 3px;
    --rund:       6px;
    --ring:       2px solid var(--brass);

    --spur: 0.02em;
}

* { box-sizing: border-box; }

/* Muss vor allem anderen stehen und !important tragen: jede eigene
   display-Regel (.gehaeuse{display:grid}, .knopf{display:inline-flex})
   schlaegt sonst das hidden-Attribut aus dem UA-Stylesheet, und
   el.hidden = true bleibt wirkungslos. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: var(--schrift-ui);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    font-family: var(--schrift-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
}

/* Zahlen sollen nicht springen, wenn ein Zaehler hochlaeuft. */
time, .zahl, output { font-variant-numeric: tabular-nums; }

button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

/* Knoepfe sind teils <button>, teils <a> (Anmelden fuehrt zu /auth/login).
   Ohne das traegt die Link-Variante die Browser-Unterstreichung. */
a.knopf { text-decoration: none; }

/* Sichtbarer Fokus ist Pflicht, auch auf der Empfaengerseite — dort sind
   die Bedienelemente rar, aber sie muessen mit der Tastatur erreichbar sein. */
:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}