/**
 * Design tokens — the single definition of Tunnyl's palette, type, motion
 * and layout.
 *
 * These lived only in dashboard-common.css, which ten pages load and ten do
 * not. The ones that do not had drifted: three different page backgrounds
 * across the auth flow, two card radii, and shadows where the rest of the site
 * had moved to borders. Login and register did not match each other, which is
 * the pair a new user moves between.
 *
 * Linked by every page, so there is one place to change a colour — and, since
 * the Sep 2026 shell work, one place where dark mode lives: every colour the
 * pages use is a token here, and the two dark blocks at the bottom redefine
 * them. Nothing else in the CSS knows which theme is active.
 */

:root {
    color-scheme: light;

    /* Type. The system stack is the Tunnyl look; keep it. The scale below is
       for new surfaces, not a mandate to resize what already exists. */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --text-xs: 12px;   /* meta: timestamps, counts, section labels */
    --text-sm: 14px;   /* ui: buttons, nav, names, inputs — the default */
    --text-md: 16px;   /* body: post content, long-form reading */
    --text-lg: 20px;   /* heading, and the wordmark */
    --text-xl: 24px;   /* page title */
    --text-2xl: 32px;  /* display */

    /* Motion. Micro-interactions are fast and ease out; nothing transitions
       `all`. reduced-motion.css zeroes these for users who asked. */
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);

    /* Surfaces */
    --page-bg: #f5f5f5;
    --card-bg: #ffffff;
    --surface-2: #f9fafb;   /* a step off white: hover on a card, input wells */
    --surface-3: #f3f4f6;   /* two steps: tags, hairline dividers */
    --hover-bg: #f5f5f5;
    --card-border: #e5e7eb;
    --border-strong: #d1d5db;
    --card-radius: 12px;

    /* Text. --text-secondary is white-background ONLY (4.83:1 there, 4.43:1
       on --page-bg). Use --text-muted anywhere off white. */
    --text-primary: #111827;
    --text-body: #374151;
    --text-secondary: #6b7280;
    --text-muted: #4b5563;
    --text-faint: #9ca3af;

    /* Accent — monochrome. The design's blue collapses to black; its blue
       tints collapse to the neutral hover grey. --accent-fg is whatever sits
       on the accent, so a filled button and an avatar invert together. */
    --accent: #000000;
    --accent-hover: #1f2937;
    --accent-fg: #ffffff;
    --accent-tint: #f5f5f5;
    --accent-border: #d1d5db;
    --avatar-bg: #111111;
    --ring: rgba(0, 0, 0, 0.06);

    /* Status. The only colour on the site. */
    --danger: #dc2626;
    --danger-strong: #991b1b;
    --danger-tint: #fef2f2;
    --danger-border: #fecaca;
    --success: #047857;
    --success-tint: #d1fae5;
    --warning: #b45309;
    --warning-tint: #fef3c7;

    /* Loading */
    --skeleton-1: #f0f0f0;
    --skeleton-2: #e0e0e0;

    /* Layout, from the design's feed grid. */
    --shell-max: 1360px;
    --shell-pad: 32px;
    --header-h: 64px;
    --stack-gap: 16px;
    --col-gap: 24px;
    --sticky-top: 84px;
}

/* Dark. Neutral near-black rather than a tinted one: the palette stays
   monochrome, so the accent inverts to off-white and everything that sat on
   it (buttons, avatars, the T badge) inverts with it. Three greys for text
   instead of pure white so long posts do not glare.

   Two blocks so the toggle wins in both directions: the system preference
   applies unless the member chose light; an explicit dark choice applies
   regardless of the system. theme.js stamps data-theme before first paint. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --page-bg: #0c0c0d;
        --card-bg: #151517;
        --surface-2: #1a1a1d;
        --surface-3: #202024;
        --hover-bg: #1e1e21;
        --card-border: #27272b;
        --border-strong: #3a3a40;
        --text-primary: #f4f4f5;
        --text-body: #d4d4d8;
        --text-secondary: #9b9ba3;
        --text-muted: #b4b4bc;
        --text-faint: #6e6e76;
        --accent: #f4f4f5;
        --accent-hover: #d4d4d8;
        --accent-fg: #0c0c0d;
        --accent-tint: #1e1e21;
        --accent-border: #3a3a40;
        --avatar-bg: #e4e4e7;
        --ring: rgba(255, 255, 255, 0.12);
        --danger: #f87171;
        --danger-strong: #fca5a5;
        --danger-tint: #2a1416;
        --danger-border: #5b2326;
        --success: #34d399;
        --success-tint: #0f2a21;
        --warning: #fbbf24;
        --warning-tint: #2a2210;
        --skeleton-1: #1c1c1f;
        --skeleton-2: #27272b;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #0c0c0d;
    --card-bg: #151517;
    --surface-2: #1a1a1d;
    --surface-3: #202024;
    --hover-bg: #1e1e21;
    --card-border: #27272b;
    --border-strong: #3a3a40;
    --text-primary: #f4f4f5;
    --text-body: #d4d4d8;
    --text-secondary: #9b9ba3;
    --text-muted: #b4b4bc;
    --text-faint: #6e6e76;
    --accent: #f4f4f5;
    --accent-hover: #d4d4d8;
    --accent-fg: #0c0c0d;
    --accent-tint: #1e1e21;
    --accent-border: #3a3a40;
    --avatar-bg: #e4e4e7;
    --ring: rgba(255, 255, 255, 0.12);
    --danger: #f87171;
    --danger-strong: #fca5a5;
    --danger-tint: #2a1416;
    --danger-border: #5b2326;
    --success: #34d399;
    --success-tint: #0f2a21;
    --warning: #fbbf24;
    --warning-tint: #2a2210;
    --skeleton-1: #1c1c1f;
    --skeleton-2: #27272b;
}