/**
 * SHARED THEME TOKENS
 * ===================
 * Single source of truth for light/dark color variables.
 * Used by homepage bundle CSS and global static-page CSS.
 */

:root {
    --black: #ffffff;
    --white: #0a0a0a;

    --bg-color: #ffffff;
    --text-color: #1b1c20;
    --text-color-strong: #111214;
    --bg-color-light: #f5f5f7;
    --bg-color-lighter: #f0f0f0;
    --surface-1: #ffffff;
    --surface-2: #f5f5f7;
    --surface-3: #f0f0f0;
    --black-light: #f5f5f7;
    --black-lighter: #f0f0f0;

    --gray: #5c5f66;
    --gray-light: #cccccc;
    --accent: var(--text-color-strong);

    --overlay-03: rgba(0, 0, 0, 0.03);
    --overlay-05: rgba(0, 0, 0, 0.05);
    --overlay-10: rgba(0, 0, 0, 0.08);
    --overlay-12: rgba(0, 0, 0, 0.1);
    --overlay-15: rgba(0, 0, 0, 0.12);
    --overlay-20: rgba(0, 0, 0, 0.15);

    --shadow-rgb: 0, 0, 0;
    --shadow-subtle: rgba(0, 0, 0, 0.1);

    --border-subtle: rgba(0, 0, 0, 0.1);
    --border-medium: rgba(0, 0, 0, 0.15);
    --border-strong: rgba(0, 0, 0, 0.25);
    --surface-border: #e6e7ea;
    --surface-border-strong: #d5d8de;

    --text-muted: rgba(27, 28, 32, 0.78);
    --text-dim: rgba(27, 28, 32, 0.64);
    --gray-dark: #444444;

    color-scheme: light;
}

[data-theme="dark"] {
    --black: #0a0a0a;
    --white: #ffffff;

    --bg-color: #0a0a0a;
    --text-color: #edf1f5;
    --text-color-strong: #f7f9fc;
    --bg-color-light: #111111;
    --bg-color-lighter: #1a1a1a;
    --surface-1: #111111;
    --surface-2: #0a0a0a;
    --surface-3: #151515;
    --black-light: #111111;
    --black-lighter: #1a1a1a;

    --gray: #9ca3ad;
    --gray-light: #444444;
    --accent: var(--text-color-strong);

    --overlay-03: rgba(255, 255, 255, 0.03);
    --overlay-05: rgba(255, 255, 255, 0.05);
    --overlay-10: rgba(255, 255, 255, 0.1);
    --overlay-12: rgba(255, 255, 255, 0.12);
    --overlay-15: rgba(255, 255, 255, 0.15);
    --overlay-20: rgba(255, 255, 255, 0.2);

    --shadow-rgb: 255, 255, 255;
    --shadow-subtle: rgba(0, 0, 0, 0.3);

    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.2);
    --surface-border: rgba(255, 255, 255, 0.08);
    --surface-border-strong: rgba(255, 255, 255, 0.14);

    --text-muted: rgba(237, 241, 245, 0.82);
    --text-dim: rgba(237, 241, 245, 0.68);
    --gray-dark: #555555;

    color-scheme: dark;
}