/*
 * Design tokens taken from the club: the logo of UTC Kirchberg am Wagram is a black ring around a
 * tennis ball, so the palette is black, tennis-ball yellow and white — nothing else. The typeface is
 * Signika, the one the club site uses, bundled locally so the app also works without a network at the
 * courts (SIL Open Font License 1.1, see fonts/OFL.txt).
 *
 * Light is the club's own look and the default. Dark is the television variant for the standings on a
 * big screen; there the ball yellow carries the accent, on light a darkened gold does, because pure
 * yellow on white is unreadable.
 */

:root {
    color-scheme: light dark;

    /* Licht: weißes Papier, schwarze Schrift, Gelb als Akzent — wie die Vereinsseite */
    --color-bg: oklch(97% 0.004 100);
    --color-bg-deep: oklch(100% 0 0);
    --color-surface: oklch(99.5% 0.002 100);
    --color-surface-raised: oklch(96% 0.006 100);
    --color-text: oklch(32% 0 0);
    --color-text-muted: oklch(51% 0 0);
    --color-hairline: oklch(21% 0 0 / 0.14);
    --color-hairline-strong: oklch(21% 0 0 / 0.32);
    --color-label: oklch(50% 0.11 88);
    --color-accent: oklch(48% 0.12 86);
    --color-accent-ink: oklch(99% 0 0);
    --color-ball: oklch(91% 0.19 104);
    --color-paper: oklch(100% 0 0);
    --color-ink: oklch(21% 0 0);
    --color-danger: oklch(52% 0.19 27);
    --color-focus: oklch(45% 0.13 86);

    --color-button-bg: var(--color-ink);
    --color-button-text: var(--color-paper);

    /* Abstände */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3.5rem;

    /* Typografie: Signika wie auf der Vereinsseite, Gewicht trennt Titel von Bedienelementen */
    --font-display: Signika, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: Signika, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --weight-display: 600;
    --font-size-xs: clamp(0.7rem, 0.6rem + 0.35vw, 1rem);
    --font-size-sm: clamp(0.85rem, 0.7rem + 0.45vw, 1.2rem);
    --font-size-md: clamp(1rem, 0.85rem + 0.55vw, 1.5rem);
    --font-size-lg: clamp(1.35rem, 1rem + 1.2vw, 2.4rem);
    --font-size-xl: clamp(2rem, 1.2rem + 2.4vw, 4.2rem);
    --font-size-name: clamp(1.7rem, 0.9rem + 3vw, 5.2rem);
    --tracking-label: 0.18em;

    /* Form */
    --radius-sm: 0.2rem;
    --radius-md: 0.4rem;
    --duration-fast: 160ms;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: oklch(18% 0 0);
        --color-bg-deep: oklch(13% 0 0);
        --color-surface: oklch(22% 0 0);
        --color-surface-raised: oklch(26% 0 0);
        --color-text: oklch(95% 0.005 100);
        --color-text-muted: oklch(72% 0.005 100);
        --color-hairline: oklch(85% 0.02 100 / 0.2);
        --color-hairline-strong: oklch(85% 0.02 100 / 0.42);
        --color-label: oklch(85% 0.15 100);
        --color-accent: oklch(91% 0.19 104);
        --color-accent-ink: oklch(20% 0.05 104);
        --color-danger: oklch(66% 0.18 27);
        --color-focus: oklch(91% 0.19 104);
        --color-button-bg: var(--color-ball);
        --color-button-text: oklch(20% 0.05 104);
    }
}