/* =========================================================
   KALATUTKA.FI — DESIGN TOKENS
   Single source of truth. Every other stylesheet in the theme
   and both app shells read from here. Do not redeclare a token
   anywhere else; add it here and reference it.

   Light is the default. Dark is applied by app.js via
   <html data-theme="dark">.
   ========================================================= */

:root {
    color-scheme: light;

    /* Brand ------------------------------------------------ */
    --brand-navy: #08233f;
    --brand-navy-2: #123b61;
    --brand-teal: #19aeb8;
    --brand-teal-deep: #128a93;
    --brand-teal-wash: #e6f8f8;

    /* Surfaces --------------------------------------------- */
    --bg: #f7fafc;
    --bg-soft: #ffffff;
    --bg-card: #ffffff;
    --bg-card-strong: #ffffff;
    --body-bg:
        radial-gradient(circle at 15% 12%, rgba(25, 174, 184, 0.07), transparent 30%),
        radial-gradient(circle at 88% 6%, rgba(63, 143, 208, 0.06), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f7fafc 55%, #eef5f9 100%);
    --loader-bg: #f7fafc;
    --well: linear-gradient(145deg, #ffffff, #e9f2f7);
    --well-shadow: inset 0 0 26px rgba(8, 35, 63, 0.06);
    --overlay-bg: rgba(255, 255, 255, 0.96);
    --footer-bg: #ffffff;

    /* Chrome (sticky header, mobile nav) -------------------- */
    --chrome: rgba(255, 255, 255, 0.94);
    --chrome-scrolled: rgba(255, 255, 255, 0.97);
    --chrome-solid: #ffffff;
    --chrome-border: rgba(8, 35, 63, 0.09);

    /* Tinted washes. Flip polarity between themes, which is
       why nothing should hardcode rgba(255,255,255,x) again. */
    --wash-1: rgba(8, 35, 63, 0.02);
    --wash-2: rgba(8, 35, 63, 0.035);
    --wash-3: rgba(8, 35, 63, 0.055);
    --wash-4: rgba(8, 35, 63, 0.085);
    --sheen: rgba(255, 255, 255, 0.6);
    --surface: rgba(8, 35, 63, 0.035);
    --surface-hover: rgba(8, 35, 63, 0.065);
    --border: rgba(8, 35, 63, 0.12);
    --border-strong: rgba(8, 35, 63, 0.2);
    --hairline: #dce7ed;

    /* Type ------------------------------------------------- */
    --text: #102b45;
    --text-soft: #5b7183;   /* 4.9:1 on --bg */
    --text-faint: #5f7488;  /* 4.6:1 on --bg */
    --on-accent: #ffffff;

    /* Accents ---------------------------------------------- */
    --primary: #19aeb8;
    --primary-strong: #128a93;
    --primary-dark: #0d6a72;
    --secondary: #3f8fd0;
    --secondary-soft: #6fb0e4;
    --accent: #d99411;
    --danger: #c9534f;
    --success: #14907a;

    /* Status text, tuned for the current background --------- */
    --ok-ink: #0f7a63;
    --info-ink: #1f5f9c;
    --warn-ink: #97650a;
    --danger-ink: #b13f3b;

    /* Depth ------------------------------------------------- */
    --shade-1: rgba(8, 35, 63, 0.06);
    --shade-2: rgba(8, 35, 63, 0.1);
    --shade-3: rgba(8, 35, 63, 0.16);
    --shadow-xl: 0 26px 70px rgba(8, 35, 63, 0.14);
    --shadow-lg: 0 16px 44px rgba(8, 35, 63, 0.1);
    --shadow-md: 0 10px 28px rgba(8, 35, 63, 0.08);
    --shadow-sm: 0 4px 14px rgba(8, 35, 63, 0.06);

    /* Geometry & motion ------------------------------------- */
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --container: 1400px;
    --header-height: 82px;
    --transition: 260ms ease;
    --grid-opacity: 0.28;

    /* Type stack. Set --font-sans once; if you later drop
       self-hosted Inter into assets/fonts/ the theme picks it
       up automatically and this keeps working unchanged. */
    --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

    --bg: #071c30;
    --bg-soft: #0b2a47;
    --bg-card: rgba(11, 42, 71, 0.72);
    --bg-card-strong: rgba(14, 50, 84, 0.9);
    --body-bg:
        radial-gradient(circle at 15% 12%, rgba(25, 174, 184, 0.14), transparent 28%),
        radial-gradient(circle at 88% 6%, rgba(63, 143, 208, 0.13), transparent 26%),
        linear-gradient(180deg, #08233f 0%, #071e34 45%, #051423 100%);
    --loader-bg: #08233f;
    --well: linear-gradient(145deg, #0d2f4c, #07213a);
    --well-shadow: inset 0 0 35px rgba(0, 0, 0, 0.32);
    --overlay-bg: rgba(9, 34, 56, 0.94);
    --footer-bg: rgba(4, 18, 32, 0.44);

    --chrome: rgba(7, 28, 48, 0.7);
    --chrome-scrolled: rgba(7, 28, 48, 0.9);
    --chrome-solid: rgba(8, 32, 54, 0.97);
    --chrome-border: rgba(255, 255, 255, 0.08);

    --wash-1: rgba(255, 255, 255, 0.025);
    --wash-2: rgba(255, 255, 255, 0.04);
    --wash-3: rgba(255, 255, 255, 0.07);
    --wash-4: rgba(255, 255, 255, 0.11);
    --sheen: rgba(255, 255, 255, 0.12);
    --surface: rgba(255, 255, 255, 0.055);
    --surface-hover: rgba(255, 255, 255, 0.09);
    --border: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.19);
    --hairline: rgba(255, 255, 255, 0.14);

    --text: #f2f9fd;
    --text-soft: #a9c0d0;
    --text-faint: #8ba5b8;
    --on-accent: #04222b;

    --primary: #35c9d4;
    --primary-strong: #19aeb8;
    --primary-dark: #0f7c85;
    --secondary: #6fb0e4;
    --secondary-soft: #9ccbf0;
    --accent: #f0bd5a;
    --danger: #ff8a86;
    --success: #4fd6b4;

    --ok-ink: #6fe3c3;
    --info-ink: #8cc5f2;
    --warn-ink: #f5cf7f;
    --danger-ink: #ff9f9b;

    --shade-1: rgba(0, 0, 0, 0.18);
    --shade-2: rgba(0, 0, 0, 0.28);
    --shade-3: rgba(0, 0, 0, 0.42);
    --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 18px 55px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 12px 35px rgba(0, 0, 0, 0.24);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.2);

    --grid-opacity: 0.16;
}

/* Honour a system preference on first visit, before app.js has
   written a stored choice onto <html>. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --bg: #071c30;
        --bg-soft: #0b2a47;
        --bg-card: rgba(11, 42, 71, 0.72);
        --bg-card-strong: rgba(14, 50, 84, 0.9);
        --body-bg:
            radial-gradient(circle at 15% 12%, rgba(25, 174, 184, 0.14), transparent 28%),
            radial-gradient(circle at 88% 6%, rgba(63, 143, 208, 0.13), transparent 26%),
            linear-gradient(180deg, #08233f 0%, #071e34 45%, #051423 100%);
        --loader-bg: #08233f;
        --well: linear-gradient(145deg, #0d2f4c, #07213a);
        --well-shadow: inset 0 0 35px rgba(0, 0, 0, 0.32);
        --overlay-bg: rgba(9, 34, 56, 0.94);
        --footer-bg: rgba(4, 18, 32, 0.44);
        --chrome: rgba(7, 28, 48, 0.7);
        --chrome-scrolled: rgba(7, 28, 48, 0.9);
        --chrome-solid: rgba(8, 32, 54, 0.97);
        --chrome-border: rgba(255, 255, 255, 0.08);
        --wash-1: rgba(255, 255, 255, 0.025);
        --wash-2: rgba(255, 255, 255, 0.04);
        --wash-3: rgba(255, 255, 255, 0.07);
        --wash-4: rgba(255, 255, 255, 0.11);
        --sheen: rgba(255, 255, 255, 0.12);
        --surface: rgba(255, 255, 255, 0.055);
        --surface-hover: rgba(255, 255, 255, 0.09);
        --border: rgba(255, 255, 255, 0.12);
        --border-strong: rgba(255, 255, 255, 0.19);
        --hairline: rgba(255, 255, 255, 0.14);
        --text: #f2f9fd;
        --text-soft: #a9c0d0;
        --text-faint: #8ba5b8;
        --on-accent: #04222b;
        --primary: #35c9d4;
        --primary-strong: #19aeb8;
        --primary-dark: #0f7c85;
        --secondary: #6fb0e4;
        --secondary-soft: #9ccbf0;
        --accent: #f0bd5a;
        --danger: #ff8a86;
        --success: #4fd6b4;
        --ok-ink: #6fe3c3;
        --info-ink: #8cc5f2;
        --warn-ink: #f5cf7f;
        --danger-ink: #ff9f9b;
        --shade-1: rgba(0, 0, 0, 0.18);
        --shade-2: rgba(0, 0, 0, 0.28);
        --shade-3: rgba(0, 0, 0, 0.42);
        --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 18px 55px rgba(0, 0, 0, 0.32);
        --shadow-md: 0 12px 35px rgba(0, 0, 0, 0.24);
        --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.2);
        --grid-opacity: 0.16;
    }
}