/* ZGF global styles — design tokens and typography */

/* ── Variables ─────────────────────────────────────────────────────── */
:root {
    --zgfred: #E33B45;
    --zgfgray: #75777B;
    --zgflightgray: #A7A9AC;
    --black: #000000;
    --white: #FFFFFF;
    --darkbg: #202020;
    --appbg: #282828;
    --background-color: 255, 255, 255;
    --form-background-color: #fcfaf3;
    --color:#000000;
    --zgf-radius1: 24px;
    --zgf-radius2: 20px;
    --zgf-radius3: 16px;
    --zgf-radius4: 12px;
    --zgf-radius5: 8px;
    --zgf-radius6: 4px;
    /* Page-level background/text — used by layout and nav */
    --page-bg: #ffffff;
    --page-text: #1a1a1a;
    --page-border: rgba(0,0,0,0.08);
    --nav-bg: #ffffff;
}

/* Dark mode token overrides — applied site-wide */
[data-theme="dark"] {
    --background-color: 32, 32, 32;
    --form-background-color: #282828;
    --color: #f0f0f0;
    --page-bg: var(--darkbg);
    --page-text: #f0f0f0;
    --page-border: rgba(255,255,255,0.1);
    --nav-bg: var(--appbg);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --background-color: 32, 32, 32;
        --form-background-color: #282828;
        --color: #f0f0f0;
        --page-bg: #202020;
        --page-text: #f0f0f0;
        --page-border: rgba(255,255,255,0.1);
        --nav-bg: #282828;
    }
}

/* ── Typography ─────────────────────────────────────────────────────── */

ul {
    list-style-type: disc;
}

li {
    list-style-type: disc;
    margin-left: 20px;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--zgfgray);
    font-family: 'Futura PT', sans-serif;
    font-weight: 500;
    margin-bottom: 0.1rem;
}

body {
    font-family: 'Proxima Nova', sans-serif;
}