/* Systm Design Tokens — single source of truth for all Blazor apps.
   Pair with fonts/fonts.css (FunktionalGrotesk + Inter @font-face).
   The fonts.css overrides --font-family to FunktionalGrotesk, so link it
   after this file (or in either order — the cascade resolves the var). */

:root {
    --spacing: 5px;
    --radius: 1px;

    --lv0: #FFFFFF;
    --lv1: #FBFBFB;
    --lv2: #EFEFEF;
    --lv3: #CFCFCF;
    --lv4: #757575;
    --lv5: #4A4A50;
    --lv6: #1A1A21;
    --lv7: #121215;
    --lv8: #080809;

    --CSignal: #FF4238;
    --CTeal: #72F5C6;
    --CPureBlue: #0000ff;
    --CLightBlue: #6B9EFF;
    --CWarning: #FFC107;

    /* Semantic: "confirmed / success" — teal is weak on white, so use pure blue
       on light mode; teal reads well on dark (overridden below). */
    --CConfirmed: var(--CPureBlue);

    /* FONT FAMILY */
    --font-family: 'Inter', sans-serif;

    /* TEXT — line-height tuned per scale: looser for body (wraps to multiple lines),
       tighter for large display sizes. Controls (buttons/inputs) use fixed heights with
       centered text, so the body bump doesn't change their metrics. */
    --text-2xs: 350 10px/1.5 var(--font-family);
    --text-xs: 350 11px/1.5 var(--font-family);
    --text-sm: 350 13px/1.5 var(--font-family);
    --text-base: 350 15px/1.5 var(--font-family);
    --text-lg: 350 17px/1.4 var(--font-family);
    --text-xl: 350 19px/1.4 var(--font-family);
    --text-2xl: 350 24px/1.25 var(--font-family);
    --text-3xl: 350 30px/1.2 var(--font-family);
    --text-4xl: 350 36px/1.15 var(--font-family);

    --pattern-checkerboard-light: url("data:image/svg+xml,%3Csvg width='2' height='2' viewBox='0 0 2 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='1' width='1' height='1' fill='%23080809'/%3E%3Crect x='1' width='1' height='1' fill='%23080809'/%3E%3C/svg%3E");
    --pattern-checkerboard-dark: url("data:image/svg+xml,%3Csvg width='2' height='2' viewBox='0 0 2 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='1' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E");

    --light: 300;
    --book: 350;
    --reg: 400;
    --med: 500;
    --semi: 600;
    --bold: 700;
}

/* Dark mode via system preference */
@media (prefers-color-scheme: dark) {
    :root {
        --pattern-checkerboard-light: url("data:image/svg+xml,%3Csvg width='2' height='2' viewBox='0 0 2 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='1' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E");

        --lv0: #080809;
        --lv1: #121215;
        --lv2: #1A1A21;
        --lv3: #393941;
        --lv4: #565661;
        --lv5: #8F8F97;
        --lv6: #EFEFEF;
        --lv7: #FBFBFB;
        --lv8: #FFFFFF;

        /* Teal reads well on dark backgrounds. */
        --CConfirmed: var(--CTeal);
    }
}