/* Explain: Theme design tokens (colors, fonts, noise patterns). */
:root {
    --primary-color: #0ea5e9;
    --primary-hover: #0284c7;
    --secondary-color: #f97316;
    --accent-color: #38bdf8;
    --yellow-color: #fde047;
    --background-color: #f0f9ff;
    --surface-color: #ffffff;
    --text-color: #0f172a;
    --text-muted: #7dd3fc;
    --border-color: #bae6fd;

    /* Paper / ink palette — teal is the default (see the [data-palette] swatches) */
    --ink-color: #10333a;
    --ink-soft: #17454e;
    --paper-color: #f4ecd8;
    --paper-shade: #e6dcc0;

    --font-heading: 'Oswald', sans-serif;
    --font-display: 'Anton', sans-serif;
    --font-body: 'Lato', sans-serif;

    /* Reusable fine-grain noise (crumpled-paper mood) */
    --noise-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Alternate "crumpled paper" palettes ----
   The dark panel color (--ink-color) drives the Show, The Band and hero-bottom
   background. Switching data-palette on <html> swaps the whole dark mood.
   Default charcoal lives in :root; the swatches below override it. */
[data-palette="charcoal"] {
    --ink-color: #262524;
    --ink-soft: #3a3836;
}

[data-palette="navy"] {
    --ink-color: #14213d;
    --ink-soft: #1d2d52;
}

[data-palette="teal"] {
    --ink-color: #10333a;
    --ink-soft: #17454e;
}

[data-palette="purple"] {
    --ink-color: #2b1d4a;
    --ink-soft: #3a2960;
}

[data-palette="forest"] {
    --ink-color: #16301f;
    --ink-soft: #1f422b;
}

[data-palette="burgundy"] {
    --ink-color: #3d1a24;
    --ink-soft: #522533;
}