@import 'tailwindcss';

/*
    PDS MOOver theme.
    Dark colors are the default and light colors apply via prefers-color-scheme,
    matching the site's original color-scheme: light dark behavior.
    The semantic tokens below are exposed to Tailwind via `@theme inline` so
    utilities like bg-background / text-foreground / bg-btn flip automatically.
*/
:root {
    --page-background: #242424;
    --page-foreground: rgba(255, 255, 255, 0.87);
    --page-link: #a2a7ff;
    --page-link-hover: #535bf2;
    --page-button: #1a1a1a;
    --page-nav: rgba(36, 36, 36, 0.7);
    --page-nav-solid: rgba(36, 36, 36, 0.95);
    --page-nav-edge: rgba(255, 255, 255, 0.08);
    --page-toggle-edge: rgba(255, 255, 255, 0.15);
    --page-badge: #c7caff;
    --page-badge-background: rgba(100, 108, 255, 0.18);
    --page-badge-edge: rgba(100, 108, 255, 0.35);
    --page-nav-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

@media (prefers-color-scheme: light) {
    :root {
        --page-background: #ffffff;
        --page-foreground: #213547;
        --page-link-hover: #747bff;
        --page-button: #f9f9f9;
        --page-nav: rgba(255, 255, 255, 0.7);
        --page-nav-solid: rgba(255, 255, 255, 0.98);
        --page-nav-edge: rgba(0, 0, 0, 0.08);
        --page-toggle-edge: rgba(0, 0, 0, 0.12);
        --page-badge: #4b52d6;
        --page-badge-background: rgba(100, 108, 255, 0.12);
        --page-badge-edge: rgba(100, 108, 255, 0.3);
        --page-nav-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }
}

@theme inline {
    --color-background: var(--page-background);
    --color-foreground: var(--page-foreground);
    --color-link: var(--page-link);
    --color-link-hover: var(--page-link-hover);
    --color-btn: var(--page-button);
    --color-muted: rgba(127, 127, 127, 0.9);
    --color-accent: #646cff;
    --color-accent-soft: rgba(100, 108, 255, 0.16);
    --color-accent-strong: rgba(100, 108, 255, 0.28);
    --color-status: #4a5568;
    --color-nav: var(--page-nav);
    --color-nav-solid: var(--page-nav-solid);
    --color-nav-edge: var(--page-nav-edge);
    --color-toggle-edge: var(--page-toggle-edge);
    --color-badge: var(--page-badge);
    --color-badge-background: var(--page-badge-background);
    --color-badge-edge: var(--page-badge-edge);
    --shadow-nav: var(--page-nav-shadow);
    --blur-nav: 10px;
}

@theme {
    --font-sans: system-ui, Avenir, Helvetica, Arial, sans-serif;
}

@layer base {
    :root {
        color-scheme: light dark;
        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        margin: 0;
        min-width: 320px;
        /* top padding leaves room for the fixed navbar */
        padding: 64px 0 24px;
        background-color: var(--page-background);
        color: var(--page-foreground);
    }

    a {
        color: var(--page-link);
        text-decoration: underline;
    }

    a:hover {
        color: var(--page-link-hover);
    }

    /* Tailwind's prelight unstyles headings and lists; restore the browser
       defaults this site was built on (h1 keeps its original custom size). */
    h1 {
        font-size: 3.2em;
        font-weight: bold;
        line-height: 1.1;
        margin: 0 0 20px;
    }

    h2 {
        font-size: 1.5em;
        font-weight: bold;
        margin: 0.83em 0;
    }

    h3 {
        font-size: 1.17em;
        font-weight: bold;
        margin: 1em 0;
    }

    ul {
        list-style: disc;
        padding-inline-start: 40px;
        margin-block: 1em;
    }

    ol {
        list-style: decimal;
        padding-inline-start: 40px;
        margin-block: 1em;
    }

    /* Tailwind's preflight strips the native borders/backgrounds from form
       controls; bring back a native-feeling input style using CSS system
       colors, which follow the site's color-scheme. */
    input:where([type='text'], [type='url'], [type='email'], [type='password'], [type='search'], [type='tel'], [type='number']),
    select,
    textarea {
        background-color: Field;
        color: FieldText;
        border: 1px solid rgba(128, 128, 128, 0.5);
        border-radius: 4px;
        padding: 8px;
    }
}