/*
 * Tokens, Reset, Typografie.
 *
 * Die einzige Datei, in der Farbwerte stehen dürfen — layout.css und components.css greifen
 * ausschließlich auf die Variablen hier zu, und tests/Unit/Design/StylesheetTest.php setzt das
 * durch. Ohne diese Regel wandert die dritte Grünschattierung irgendwann in eine Komponente
 * und fehlt im dunklen Schema, wo sie niemand nachschlägt.
 *
 * Hell und dunkel sind zwei Wertetabellen und nicht eine mit einem Filter darüber. Diese App
 * wird abends im Bett öfter geöffnet als mittags; ein aufgehelltes Dunkelschema hat dort zu
 * wenig Kontrast, und ein invertiertes zu viel.
 * tests/Unit/Design/ContrastTest.php prüft beide Tabellen gegen WCAG AA.
 */

:root {
    color-scheme: light dark;

    /* Flächen und Linien */
    --flaeche: #eef0f4;
    --flaeche-erhoben: #ffffff;
    /* Zwei Linienfarben, und der Unterschied ist kein Geschmack: --linie trennt und umrandet
       (Zierde, WCAG stellt daran keine Anforderung), --linie-stark umreißt Bedienelemente und
       muss deshalb 3:1 gegen beide Flächen halten. Eine Linie für beides wäre entweder ein zu
       schwerer Kartenrand oder ein Eingabefeld, dessen Grenze niemand sieht. */
    --linie: #c3cad4;
    --linie-stark: #7f8791;

    /* Schrift */
    --text: #15181d;
    --text-leise: #4e5763;

    /* Die drei Regelzustände. Farbe ist immer nur die Zugabe: jeder Zustand trägt
       zusätzlich ein Zeichen und ein Wort (docs/02, „Gestaltung"). */
    --gut: #14603a;
    --gut-flaeche: #d5edde;
    --grenze: #7a4a02;
    --grenze-flaeche: #f6e5c4;
    --gerissen: #9c1f26;
    --gerissen-flaeche: #fbdcde;

    /* Die Bedienfarbe der Oberfläche — Fokusring, aktiver Navigationspunkt, heutiger Tag.
       Bewusst nicht --person-a: die Personenfarbe steht für einen Menschen, nicht für
       einen Knopf, und darf sich nicht ändern, wenn die Oberfläche sich ändert. */
    --akzent: #1a5c92;
    --akzent-text: #ffffff;

    /* Die zwei Personenfarben. Sie sind kein Vorgabewert und keine Kopie aus der Datenbank
       mehr, sondern die zwei Farben: vergeben nach der stabilen Reihenfolge der Konten
       (UserRepository::findAllOrdered), also ist Oliver auf beiden Telefonen dieselbe Spalte
       in derselben Farbe. Begründung in OFFENE-PUNKTE §7 — ein Hexwert aus der Datenbank
       kommt an einer CSP ohne unsafe-inline nicht vorbei, und der Kontrast-Test kann nur
       prüfen, was er kennt.
       Blau gegen Braunorange, nicht Rot gegen Grün — sie müssen sich auch bei
       Rot-Grün-Schwäche unterscheiden. Getragen wird die Aussage ohnehin nie von der Farbe:
       jede Spalte nennt den Namen, jeder Zustand ein Zeichen und ein Wort. */
    --person-a: #1f6390;
    --person-b: #8f4611;

    /* Die Serie in „Heute": die Flamme und die Zahl darin. Warm, und bewusst keine der beiden
       Personenfarben — eine Serie gehört einem Ziel und nicht einem Menschen, und --person-b
       ist genau der Braunorange-Ton, mit dem sie sonst verwechselt würde. */
    --serie: #b3520f;
    --serie-text: #ffffff;

    /* Die zwei Untergründe der Berührung: --flaeche-beruehrt liegt unter dem Zeiger und unter
       dem Daumen, --akzent-flaeche unter dem, was zur Bedienfarbe gehört (Navigationspunkt,
       Tag im Streifen, die gerade getauschte Zeile). Beide tragen nie eine Aussage — sie sagen
       „hier fasst du gerade an" und verschwinden wieder. Deshalb dürfen sie leise sein; jeder
       Text darauf behält seinen eigenen Kontrast, denn sie liegen nur unter Flächen, deren
       Schrift schon gegen --flaeche geprüft ist. */
    --flaeche-beruehrt: #dfe3ea;
    --akzent-flaeche: #d6e6f4;
    /* Und dieselbe Bewegung auf der Bedienfarbe selbst, für den Knopf, der sie trägt: im
       hellen Schema dunkler, im dunklen heller — beide Male weg vom Untergrund, damit
       --akzent-text seinen Kontrast nicht verliert, sondern gewinnt. */
    --akzent-beruehrt: #14507f;

    /* Abstandsraster */
    --raum-1: 4px;
    --raum-2: 8px;
    --raum-3: 12px;
    --raum-4: 16px;
    --raum-5: 24px;
    --raum-6: 32px;

    /* Wie lange ein Wechsel dauert. Eine Zahl und nicht zwei: ein Knopf, der schneller
       zurückfärbt als er anfärbt, fühlt sich nicht wie derselbe Knopf an. Kurz genug, dass
       niemand darauf wartet — 140 ms sind unterhalb dessen, was als Verzögerung auffällt, und
       oberhalb dessen, was als Sprung wahrgenommen wird. */
    --wechsel: 140ms;

    /* Rundungen und Erhebung */
    --rund-1: 10px;
    --rund-2: 14px;
    --rund-3: 18px;
    --rund-voll: 999px;
    --schatten: 0 1px 2px rgba(16, 20, 28, 0.08), 0 4px 12px rgba(16, 20, 28, 0.05);

    /* Das kleinste Tap-Ziel, das diese App kennt (docs/02: mindestens 44 × 44 px). */
    --griff: 44px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --flaeche: #101317;
        --flaeche-erhoben: #1c2027;
        --linie: #39424e;
        --linie-stark: #6b7480;
        --text: #eef1f6;
        --text-leise: #a3aebc;
        --gut: #6fd396;
        --gut-flaeche: #123020;
        --grenze: #e5b45f;
        --grenze-flaeche: #34260c;
        --gerissen: #f0908f;
        --gerissen-flaeche: #3b191c;
        --akzent: #79b8e8;
        --akzent-text: #0d1116;
        --person-a: #7fbcea;
        --person-b: #e0a267;
        --serie: #f0a35e;
        --serie-text: #23150a;
        --flaeche-beruehrt: #2a313a;
        --akzent-flaeche: #1c2f40;
        --akzent-beruehrt: #92c7ef;
        --schatten: none;
    }
}

/* --- Reset ------------------------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
h1,
h2,
h3,
p,
ul,
ol,
figure,
fieldset {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

fieldset {
    padding: 0;
    border: 0;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* --- Typografie ------------------------------------------------------------------------- */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    /* Systemschrift-Stapel: nichts zu laden, nichts, das offline fehlt — und auf dem Handy
       sieht es aus wie eine App und nicht wie eine Website. */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.45;
    background: var(--flaeche);
    color: var(--text);
}

h1 {
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
}

h2 {
    font-size: 19px;
    line-height: 1.25;
    font-weight: 620;
}

h3 {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 620;
}

a {
    color: var(--akzent);
}

/* Sichtbar und immer gleich: der Ring ist die einzige Rückmeldung, die jemand bekommt, der
   sich mit der Tastatur durch die Seite bewegt. */
:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
    border-radius: var(--rund-1);
}

/* --- Bewegung --------------------------------------------------------------------------- */

/*
 * Wer Bewegung abbestellt hat, bekommt keine. Das ist keine Höflichkeit, sondern für manche
 * Menschen der Unterschied zwischen benutzbar und übel — und die Wechsel dieser App tragen
 * ohnehin keine Aussage, sie machen nur weich, was sonst springt. `!important` deshalb, weil
 * die Regel jede spätere Komponente einholen muss, auch die, die es noch nicht gibt.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* Nur für Vorlesegeräte: Text, der gesagt, aber nicht gezeigt wird. */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}