/* =========================================================================
   Juuriweb – Teemamuuttujat
   Vaalea teema oletuksena (:root), tumma teema [data-theme="dark"].
   Kaikki värit, varjot ja säteet määritellään CSS-muuttujina, jotta
   teemoja on helppo laajentaa ja muokata.
   ========================================================================= */

:root {
    color-scheme: light;

    /* Taustat */
    --color-bg: #eef0f4;
    --color-bg-gradient-1: #f4f6f9;
    --color-bg-gradient-2: #e7eaf0;

    /* Kortti / lukuruutu */
    --color-card: #ffffff;
    --color-card-border: rgba(15, 23, 42, 0.04);

    /* Teksti */
    --color-text: #1f2733;
    --color-text-muted: #6b7280;
    --color-text-inverse: #ffffff;

    /* Painikkeet */
    --color-surface: #ffffff;
    --color-surface-2: #f1f3f7;
    --color-icon: #3a4250;
    --color-control-label: #6b7280;

    /* Korostus / aktiivinen sana */
    --color-accent: #2f6bff;
    --color-accent-strong: #1f5cff;
    --color-highlight-bg: #cfe0ff;
    --color-highlight-text: #14306b;

    /* Varjot */
    --shadow-card: 0 18px 40px -22px rgba(15, 23, 42, 0.35);
    --shadow-soft: 0 6px 18px -8px rgba(15, 23, 42, 0.25);
    --shadow-primary: 0 16px 28px -10px rgba(47, 107, 255, 0.55);

    /* Säteet */
    --radius-card: 28px;
    --radius-button: 18px;
    --radius-pill: 999px;

    /* Vierityspalkki */
    --color-scrollbar-thumb: rgba(15, 23, 42, 0.15);
    --color-scrollbar-thumb-hover: rgba(15, 23, 42, 0.28);

    /* Mitat */
    --content-max-width: 480px;
    --primary-button-size: 72px;
}

[data-theme="dark"] {
    color-scheme: dark;

    /* Taustat */
    --color-bg: #0f141c;
    --color-bg-gradient-1: #161d28;
    --color-bg-gradient-2: #0c1119;

    /* Kortti / lukuruutu */
    --color-card: #1b2330;
    --color-card-border: rgba(255, 255, 255, 0.06);

    /* Teksti */
    --color-text: #eef2f8;
    --color-text-muted: #9aa6b8;
    --color-text-inverse: #0f141c;

    /* Painikkeet */
    --color-surface: #1b2330;
    --color-surface-2: #232d3d;
    --color-icon: #c7d0de;
    --color-control-label: #9aa6b8;

    /* Korostus / aktiivinen sana */
    --color-accent: #5b8bff;
    --color-accent-strong: #6d97ff;
    --color-highlight-bg: #29426f;
    --color-highlight-text: #dce8ff;

    /* Varjot */
    --shadow-card: 0 20px 44px -24px rgba(0, 0, 0, 0.75);
    --shadow-soft: 0 8px 20px -10px rgba(0, 0, 0, 0.6);
    --shadow-primary: 0 16px 30px -12px rgba(91, 139, 255, 0.6);

    /* Vierityspalkki */
    --color-scrollbar-thumb: rgba(255, 255, 255, 0.18);
    --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.32);
}