/* Public Site Base / Tokens */
:root {
    --site-bg: #050505;
    --site-surface: #0d0d0f;
    --site-surface-raised: #121214;
    --site-border: #29292d;
    --site-text: #f5f5f5;
    --site-muted: #a5a7ab;
    --site-dim: #73767c;
    --site-gold: #f4b900;
    --site-gold-light: #ffd028;
    --site-green: #39c978;
    --site-line: rgba(255, 255, 255, 0.1);

    /* Compatibility aliases used by current page components. */
    --bg: var(--site-bg);
    --surface: var(--site-surface);
    --surface-raised: var(--site-surface-raised);
    --border: var(--site-border);
    --text: var(--site-text);
    --text-secondary: var(--site-muted);
    --accent: var(--site-gold);
    --accent-hover: var(--site-gold-light);
    --home-bg: var(--site-bg);
    --home-surface: var(--site-surface);
    --home-surface-2: var(--site-surface-raised);
    --home-surface-3: #18181b;
    --home-text: var(--site-text);
    --home-muted: var(--site-muted);
    --home-dim: var(--site-dim);
    --home-gold: var(--site-gold);
    --home-gold-light: var(--site-gold-light);
    --home-green: var(--site-green);
    --home-line: var(--site-line);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--site-bg); }
body.site-page {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--site-text);
    background: radial-gradient(circle at 50% -180px, rgba(244, 185, 0, .08), transparent 430px), var(--site-bg);
    font-family: 'Noto Sans Thai', 'Noto Serif Lao', sans-serif;
}
button, a { font: inherit; }
.home-container { position: relative; z-index: 1; width: min(1320px, 100%); margin-inline: auto; padding-inline: 28px; }

@media (max-width: 720px) { .home-container { padding-inline: 20px; } }
@media (max-width: 560px) { .home-container { padding-inline: 18px; } }
@media (max-width: 350px) { .home-container { padding-inline: 14px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }