/* ==========================================================================
   WATT HUB DESIGN TOKENS — „Spektrum světla"
   Sdíleno všemi portály (Klient / Partner / Admin) přes
   _content/Energetika.SharedUI/css/wh-tokens.css

   Paleta vytezena z faset blesku v logu. Teple barvy = energie/sdileni,
   studene = data/management, limetkova = uspora.

   PRAVIDLO: hex hodnota smi existovat JEN tady (a v WattHubTheme.cs —
   oba soubory drzet sync). Povrchy/texty pouzivat --wh-* aliasy, ktere
   se prepinaji light/dark automaticky pres --mud-palette-*.
   ========================================================================== */

:root {
    /* --- Bolt spectrum (brand, nemeni se s theme) --- */
    --wh-bolt-yellow: #F5D90A;
    --wh-bolt-yellow-soft: #FBE46B;
    --wh-bolt-orange: #F29441;
    --wh-bolt-red: #E63329;
    --wh-bolt-sky: #4FB4E5;
    --wh-bolt-violet: #8B4A9E;
    --wh-bolt-violet-deep: #5B2D8E;
    --wh-bolt-deep: #4A2D6B;
    --wh-bolt-lime: #A6CE39;
    --wh-bolt-lime-deep: #7CB342;
    --wh-ink: #1A1A1A;

    /* --- Semantic mapping (brand role) --- */
    --wh-energy: var(--wh-bolt-yellow);        /* energie, vyroba */
    --wh-solar: var(--wh-bolt-orange);         /* slunce, FVE */
    --wh-alert: var(--wh-bolt-red);            /* POUZE alerty/errory */
    --wh-data: var(--wh-bolt-sky);             /* data, spotreba, info */
    --wh-ai: var(--wh-bolt-violet);            /* AI, analytika, premium */
    --wh-save: var(--wh-bolt-lime);            /* uspora, uspech */
    /* Hlavni znackova akce (CTA) — samostatna role od Primary interakce */
    --wh-cta: var(--wh-bolt-yellow);
    --wh-cta-text: #17263C;
    --wh-cta-hover: color-mix(in srgb, var(--wh-bolt-yellow) 80%, var(--wh-bolt-orange));
    --wh-night: #0C1626;                       /* nocni obloha navy (hero/footer) — dark standard */
    --wh-night-2: #16233A;
    --wh-night-3: #223352;
    --wh-night-text: #F4F7FC;                  /* text na nocni obloze */
    --wh-night-text-2: rgba(244, 247, 252, 0.74);  /* sekundarni text na nocni obloze */
    --wh-night-text-3: rgba(244, 247, 252, 0.52);  /* terciarni/komentare na noci */
    /* Textovy akcent modulu NA PLOSE (labely, hodnoty, ikony na surface).
       Odlisny od vyplnovych akcentu: v dark rezimu se vzdy zesvetli.
       Na nocni obloze (--wh-night*) nepouzivat — tam plati --wh-night-text*. */
    --wh-accent-text: var(--wh-bolt-violet-deep);

    /* --- Hluboke odstiny spektra (ikonky, gradienty) --- */
    --wh-bolt-yellow-deep: #B8860B;            /* energie ikona na svetlem */
    --wh-bolt-sky-deep: #2E86C1;               /* data ikona / konec gradientu */

    /* Syte gradienty pro ikonove chipy (bila ikona na gradientu).
       Vcetne stinu — pastel-tint chipy nahrazuj touto paletou. */
    --wh-grad-violet: linear-gradient(135deg, #5B2D8E 0%, #8B4A9E 100%);
    --wh-grad-sky:    linear-gradient(135deg, #1B4F72 0%, #2E86C1 100%);
    --wh-grad-orange: linear-gradient(135deg, #B34A00 0%, #F29441 100%);
    --wh-grad-lime:   linear-gradient(135deg, #558B2F 0%, #8BC34A 100%);
    --wh-grad-red:    linear-gradient(135deg, #B71C1C 0%, #E63329 100%);
    --wh-grad-gold:   linear-gradient(135deg, #8A6D0A 0%, #D4A017 100%);
    --wh-grad-navy:   linear-gradient(135deg, #101B2D 0%, #1B4F72 100%);
    /* Svetle konci gradienty (tmavy ink) — hlavicky modulu s teplou barvou */
    --wh-grad-amber:  linear-gradient(135deg, #B8860B 0%, #F5D90A 100%);
    --wh-grad-sun:    linear-gradient(135deg, #F29441 0%, #F5D90A 100%);

    /* --- Semantic surfaces/text — AUTO light/dark pres MudBlazor paletu ---
       Pouzivat VZDY misto hardcoded #fff/#333. Prepne se s MudThemeProvider. */
    --wh-surface: var(--mud-palette-surface);
    --wh-surface-alt: var(--mud-palette-background-grey);
    --wh-bg: var(--mud-palette-background);
    --wh-border: var(--mud-palette-lines-inputs);
    --wh-divider: var(--mud-palette-divider);
    --wh-text: var(--mud-palette-text-primary);
    --wh-text-2: var(--mud-palette-text-secondary);
    --wh-hover: var(--mud-palette-action-default-hover);
    --wh-primary: var(--mud-palette-primary);

    /* --- Radii --- */
    --wh-radius-s: 10px;
    --wh-radius-m: 14px;
    --wh-radius-l: 20px;
    --wh-radius-xl: 28px;
    --wh-radius-pill: 9999px;

    /* --- Shadows (light surfaces) --- */
    --wh-shadow-1: 0 1px 2px rgba(16, 10, 40, 0.05), 0 4px 14px rgba(16, 10, 40, 0.05);
    --wh-shadow-2: 0 10px 28px rgba(16, 10, 40, 0.10), 0 2px 6px rgba(16, 10, 40, 0.05);
    --wh-shadow-3: 0 20px 48px rgba(16, 10, 40, 0.16);

    /* --- Glows (dark surfaces — spektrum sviti ve tme) --- */
    --wh-glow-energy: 0 0 24px rgba(245, 217, 10, 0.35);
    --wh-glow-data: 0 0 24px rgba(79, 180, 229, 0.35);
    --wh-glow-ai: 0 0 24px rgba(139, 74, 158, 0.40);
    --wh-glow-save: 0 0 24px rgba(166, 206, 57, 0.30);

    /* --- Spacing scale --- */
    --wh-space-1: 4px;
    --wh-space-2: 8px;
    --wh-space-3: 12px;
    --wh-space-4: 16px;
    --wh-space-5: 24px;
    --wh-space-6: 32px;
    --wh-space-7: 48px;
    --wh-space-8: 64px;
    --wh-space-9: 96px;
}

/* Registrace úhlu pro animovaný "proud energie" na obrysu hero banneru
   kalkulaček — registrace umožní plynulou interpolaci úhlu v keyframes. */
@property --wh-energy-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* Dark režim: textové "-deep" varianty a syté akcenty zesvětlíme, aby zůstaly
   čitelné na tmavých plochách. Stejné hodnoty jako .wh-lp dark paleta. */
.mud-theme-dark {
    --wh-bolt-violet: #B490D8;
    --wh-bolt-violet-deep: #C8A8EB;
    --wh-accent-text: #C8A8EB;
    --wh-bolt-deep: #9A7BC8;
    --wh-bolt-yellow-deep: #E8C832;
    --wh-bolt-sky-deep: #7CD0F1;
    --wh-bolt-lime-deep: #B7D969;
    --wh-bolt-orange: #F9B65F;
    --wh-bolt-red: #FF8E86;
    /* Data/interakcni akcent na tmave plose — cteni car, odkazu a focusu */
    --wh-data: #7CD0F1;
}

.wh-lp {
    --wh-lp-bg: #F6F7FB;
    --wh-lp-surface: #FFFFFF;
    --wh-lp-raised: #EEF2F7;
    --wh-lp-text: #17263C;
    --wh-lp-muted: #526178;
    --wh-lp-line: #D9E1EC;
    --wh-lp-control-border: #78869B;
    --wh-lp-data: #17658D;
    --wh-lp-solar: #A14B12;
    --wh-lp-energy: #806300;
    --wh-lp-save: #426B19;
    --wh-lp-ai: #6B3FA0;
    --wh-lp-community: #0F766E;
    --wh-lp-error: #B92326;
    --wh-lp-logo-surface: #FFFFFF;
    --wh-lp-cta: var(--wh-bolt-yellow);
    --wh-lp-cta-text: #17263C;
    --wh-lp-control-radius: 12px;
    --wh-lp-small-radius: 16px;
    --wh-lp-card-radius: 20px;
    --wh-lp-large-radius: 24px;
    --wh-lp-shadow: 0 18px 54px -24px rgba(23, 38, 60, 0.28);
    --wh-lp-accent: var(--wh-lp-data);
}

.wh-lp[data-theme="dark"], .mud-theme-dark .wh-lp {
    --wh-lp-bg: #101B2D;
    --wh-lp-surface: #1A2940;
    --wh-lp-raised: #22354E;
    --wh-lp-text: #F4F7FC;
    --wh-lp-muted: #B7C4D6;
    --wh-lp-line: #3C526D;
    --wh-lp-control-border: #8A9BB3;
    --wh-lp-data: #7CD0F1;
    --wh-lp-solar: #F9B65F;
    --wh-lp-energy: #F5D90A;
    --wh-lp-save: #B7D969;
    --wh-lp-ai: #C8A8EB;
    --wh-lp-community: #5EEAD4;
    --wh-lp-error: #FF8E86;
    --wh-lp-shadow: 0 18px 54px -24px rgba(0, 0, 0, 0.55);
    --wh-lp-accent: var(--wh-lp-data);
}