/* ============================================================================
   Apicis Solutions — Dark Theme
   Based on Readmes/DESIGN.md Strategic Clarity dim-mode direction.
   ============================================================================ */

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

    --background: #011525;
    --surface: #011525;
    --surface-dim: #011525;
    --surface-bright: #283b4c;
    --surface-container-lowest: #000f1d;
    --surface-container-low: #081d2d;
    --surface-container: #0c2131;
    --surface-container-high: #182c3c;
    --surface-container-highest: #233748;

    --on-surface: #d0e5fb;
    --on-surface-variant: #c3c6ce;
    --on-surface-muted: #7a92b0;
    --inverse-surface: #d0e5fb;
    --inverse-on-surface: #1f3243;

    --primary: #b0c9e8;
    --on-primary: #0d2339;
    --primary-container: #102a43;
    --on-primary-container: #d1e4ff;
    --primary-strong: #3e86ff;

    --secondary: #ffb3af;
    --on-secondary: #68000e;
    --secondary-container: #b60020;
    --on-secondary-container: #ffffff;
    --secondary-strong: #ff5a6b;

    --tertiary: #b1c9e6;
    --on-tertiary: #1a324a;

    --error: #ffb4ab;
    --on-error: #690005;

    --outline: #8d9198;
    --outline-variant: #43474d;

    --grad-orchid: linear-gradient(135deg, #102a43 0%, #081d2d 60%, #011525 100%);
    --grad-azure: linear-gradient(135deg, #3e86ff 0%, #123c86 100%);
    --grad-aurora: linear-gradient(135deg, #b0c9e8 0%, #ff5a6b 100%);
    --grad-dial: conic-gradient(from 180deg, #123c86, #0c2131, #b60020, #123c86);

    --shadow-soft: 0 24px 48px -12px rgba(1, 21, 37, 0.72);
    --shadow-lift: 0 32px 64px -16px rgba(62, 134, 255, 0.25);
    --shadow-glow: 0 0 0 2px rgba(255, 179, 175, 0.18), 0 0 40px rgba(62, 134, 255, 0.2);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

    --scrollbar-color: rgba(62, 134, 255, 0.8) transparent;
    --scrollbar-thumb: linear-gradient(180deg, rgba(62, 134, 255, 0.9) 0%, rgba(255, 90, 107, 0.82) 100%);
    --scrollbar-thumb-hover: linear-gradient(180deg, rgba(62, 134, 255, 1) 0%, rgba(255, 90, 107, 0.95) 100%);
    --page-background: radial-gradient(1200px 700px at 85% -10%, rgba(62, 134, 255, 0.11), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(255, 90, 107, 0.12), transparent 55%), var(--background);
    --splash-background: radial-gradient(900px 600px at 50% 50%, rgba(18, 60, 134, 0.42), transparent 70%), var(--background);
    --splash-dial-shadow: var(--shadow-soft), var(--shadow-inset), 0 0 80px rgba(62, 134, 255, 0.2);
    --splash-hub-background: radial-gradient(circle at 50% 30%, rgba(18, 60, 134, 0.88), rgba(1, 21, 37, 0.95));

    --topbar-background: rgba(1, 21, 37, 0.48);
    --topbar-float-background: rgba(1, 21, 37, 0.9);
    --topbar-float-shadow: 0 16px 38px -16px rgba(0, 0, 0, 0.72), 0 8px 18px -10px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(126, 184, 255, 0.28);
    --nav-pill-hover-background: rgba(255, 255, 255, 0.06);
    --nav-pill-active-background: rgba(255, 255, 255, 0.08);

    --hero-veil-background: linear-gradient(180deg, rgba(10, 6, 18, 0.55) 0%, rgba(10, 6, 18, 0.78) 60%, rgba(10, 6, 18, 0.92) 100%), radial-gradient(700px 500px at 80% 30%, rgba(110, 168, 255, 0.1), transparent 70%);
    --hero-read-background: linear-gradient(180deg, rgba(1, 21, 37, 0.8) 0%, rgba(1, 21, 37, 0.68) 100%);
    --hero-read-border: 1px solid rgba(176, 201, 232, 0.16);
    --hero-read-shadow: 0 28px 54px -26px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(176, 201, 232, 0.06);
    --dial-tick-border: rgba(176, 201, 232, 0.18);
    --peg-active-shadow: 0 0 0 4px rgba(110, 168, 255, 0.18), 0 0 20px rgba(110, 168, 255, 0.5);
    --dial-core-background: radial-gradient(circle at 50% 30%, rgba(18, 60, 134, 0.86), rgba(1, 21, 37, 0.95));
    --dial-core-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8);
    --hero-title-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
    --hero-lede-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
    --service-card-focus-border: rgba(110, 168, 255, 0.55);
    --service-card-focus-shadow: 0 20px 42px -26px rgba(5, 10, 20, 0.9), 0 0 0 1px rgba(62, 134, 255, 0.24);
    --service-card-selected-border: rgba(255, 90, 107, 0.7);

    --cta-glow-background: radial-gradient(60% 100% at 50% 0%, rgba(62, 134, 255, 0.18), transparent 70%);
    --cta-card-background: linear-gradient(180deg, rgba(24, 61, 127, 0.92) 0%, rgba(11, 27, 56, 0.86) 100%);
    --cta-card-border: 1px solid rgba(255, 90, 107, 0.56);
    --cta-card-shadow: 0 28px 52px -20px rgba(0, 0, 0, 0.74), 0 0 0 1px rgba(62, 134, 255, 0.28), 0 0 42px rgba(255, 90, 107, 0.2);
    --cta-form-tag-background: rgba(1, 21, 37, 0.68);
    --cta-form-background: rgba(1, 21, 37, 0.88);
    --cta-form-shadow: 0 24px 44px -18px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(62, 134, 255, 0.2);
    --focus-ring-shadow: 0 0 0 3px rgba(62, 134, 255, 0.22);

    --contact-background: radial-gradient(800px 500px at 100% 0%, rgba(255, 90, 107, 0.11), transparent 60%), var(--surface-dim);
    --social-chip-background: rgba(8, 29, 45, 0.68);
    --social-chip-hover-border: rgba(255, 179, 175, 0.6);
    --social-chip-hover-background: rgba(182, 0, 32, 0.14);
    --map-panel-background: linear-gradient(90deg, rgba(176, 201, 232, 0.08) 1px, transparent 1px), linear-gradient(0deg, rgba(176, 201, 232, 0.08) 1px, transparent 1px), radial-gradient(circle at 52% 48%, rgba(255, 179, 175, 0.2), transparent 0 16px, rgba(255, 179, 175, 0.05) 17px 120px, transparent 121px), var(--surface-container-low);
    --map-panel-overlay-shadow: inset 0 0 0 1px rgba(176, 201, 232, 0.12), inset 0 -80px 90px rgba(1, 21, 37, 0.3);
    --map-link-background: rgba(1, 21, 37, 0.86);
    --map-link-border: 1px solid rgba(176, 201, 232, 0.32);
    --map-link-hover-border: rgba(255, 179, 175, 0.58);

    --theme-toggle-track-background: rgba(8, 29, 45, 0.82);
    --theme-toggle-border: rgba(176, 201, 232, 0.24);
    --theme-toggle-thumb-background: linear-gradient(135deg, #b0c9e8 0%, #ffb3af 100%);
    --theme-toggle-thumb-shadow: 0 10px 18px rgba(1, 21, 37, 0.34);
    --theme-toggle-text: #c3c6ce;
    --theme-toggle-ring: 0 0 0 1px rgba(176, 201, 232, 0.12);

    --mobile-topbar-background: rgba(1, 21, 37, 0.74);
    --mobile-dial-background: conic-gradient(from 210deg, rgba(62, 134, 255, 0.34) 0deg 128deg, rgba(255, 90, 107, 0.24) 128deg 218deg, rgba(176, 201, 232, 0.14) 218deg 360deg), repeating-conic-gradient(from 0deg, rgba(176, 201, 232, 0.55) 0deg 0.75deg, transparent 0.75deg 4.8deg);
    --mobile-dial-border: rgba(176, 201, 232, 0.34);
    --mobile-dial-inner-background: radial-gradient(circle at 50% 50%, rgba(24, 44, 60, 0.96), rgba(0, 15, 29, 0.98) 78%);
    --mobile-dial-shadow: 0 0 0 1px rgba(176, 201, 232, 0.16), 0 -8px 26px rgba(62, 134, 255, 0.2);
}