/* ============================================================================
   Apicis Solutions — Light Theme
   Bright counterpart to Strategic Clarity with the same blue/red hierarchy.
   ============================================================================ */

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

    --background: #edf3f8;
    --surface: #ffffff;
    --surface-dim: #e7eef5;
    --surface-bright: #ffffff;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f7fbff;
    --surface-container: #eef4fa;
    --surface-container-high: #e3ecf5;
    --surface-container-highest: #d8e4ef;

    --on-surface: #11283e;
    --on-surface-variant: #4b6077;
    --on-surface-muted: #718498;
    --inverse-surface: #203246;
    --inverse-on-surface: #f4f8fc;

    --primary: #235b91;
    --on-primary: #ffffff;
    --primary-container: #dce8f5;
    --on-primary-container: #163a5c;
    --primary-strong: #0b72cb;

    --secondary: #bf314d;
    --on-secondary: #ffffff;
    --secondary-container: #ffd8de;
    --on-secondary-container: #651523;
    --secondary-strong: #d22645;

    --tertiary: #6c89a5;
    --on-tertiary: #ffffff;

    --error: #b3261e;
    --on-error: #ffffff;

    --outline: #9fb1c3;
    --outline-variant: #cad7e3;

    --grad-orchid: linear-gradient(135deg, #ffffff 0%, #eaf2f9 58%, #dce8f5 100%);
    --grad-azure: linear-gradient(135deg, #235b91 0%, #0b72cb 100%);
    --grad-aurora: linear-gradient(135deg, #235b91 0%, #d22645 100%);
    --grad-dial: conic-gradient(from 180deg, #0b72cb, #dce8f5, #d22645, #0b72cb);

    --shadow-soft: 0 24px 48px -20px rgba(20, 55, 88, 0.12);
    --shadow-lift: 0 32px 64px -24px rgba(35, 91, 145, 0.18);
    --shadow-glow: 0 0 0 1px rgba(35, 91, 145, 0.08), 0 18px 40px rgba(210, 38, 69, 0.12);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.82);

    --scrollbar-color: rgba(35, 91, 145, 0.52) transparent;
    --scrollbar-thumb: linear-gradient(180deg, rgba(35, 91, 145, 0.74) 0%, rgba(210, 38, 69, 0.62) 100%);
    --scrollbar-thumb-hover: linear-gradient(180deg, rgba(35, 91, 145, 0.9) 0%, rgba(210, 38, 69, 0.78) 100%);
    --page-background: radial-gradient(1200px 700px at 85% -10%, rgba(35, 91, 145, 0.12), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(210, 38, 69, 0.08), transparent 55%), var(--background);
    --splash-background: radial-gradient(900px 600px at 50% 50%, rgba(35, 91, 145, 0.16), transparent 70%), var(--background);
    --splash-dial-shadow: var(--shadow-soft), var(--shadow-inset), 0 0 80px rgba(35, 91, 145, 0.12);
    --splash-hub-background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.98), rgba(220, 232, 245, 0.96));

    --topbar-background: rgba(255, 255, 255, 0.62);
    --topbar-float-background: rgba(255, 255, 255, 0.95);
    --topbar-float-shadow: 0 18px 36px -20px rgba(17, 40, 62, 0.22), 0 8px 16px -10px rgba(17, 40, 62, 0.14), 0 0 0 1px rgba(11, 114, 203, 0.2);
    --nav-pill-hover-background: rgba(17, 40, 62, 0.06);
    --nav-pill-active-background: rgba(17, 40, 62, 0.09);

    --hero-veil-background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(244, 248, 252, 0.74) 60%, rgba(237, 243, 248, 0.88) 100%), radial-gradient(700px 500px at 80% 30%, rgba(35, 91, 145, 0.1), transparent 70%);
    --hero-read-background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(247, 251, 255, 0.76) 100%);
    --hero-read-border: 1px solid rgba(35, 91, 145, 0.12);
    --hero-read-shadow: 0 26px 52px -30px rgba(17, 40, 62, 0.18), 0 0 0 1px rgba(35, 91, 145, 0.05);
    --dial-tick-border: rgba(35, 91, 145, 0.18);
    --peg-active-shadow: 0 0 0 4px rgba(35, 91, 145, 0.12), 0 0 20px rgba(35, 91, 145, 0.24);
    --dial-core-background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.98), rgba(220, 232, 245, 0.95));
    --dial-core-shadow: 0 20px 50px -28px rgba(17, 40, 62, 0.22);
    --hero-title-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    --hero-lede-shadow: none;
    --service-card-focus-border: rgba(11, 114, 203, 0.42);
    --service-card-focus-shadow: 0 20px 42px -30px rgba(17, 40, 62, 0.18), 0 0 0 1px rgba(35, 91, 145, 0.16);
    --service-card-selected-border: rgba(210, 38, 69, 0.48);

    --cta-glow-background: radial-gradient(60% 100% at 50% 0%, rgba(35, 91, 145, 0.12), transparent 70%);
    --cta-card-background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(231, 238, 245, 0.94) 100%);
    --cta-card-border: 1px solid rgba(35, 91, 145, 0.16);
    --cta-card-shadow: 0 28px 52px -28px rgba(17, 40, 62, 0.18), 0 0 0 1px rgba(35, 91, 145, 0.08);
    --cta-form-tag-background: rgba(255, 255, 255, 0.82);
    --cta-form-background: rgba(255, 255, 255, 0.9);
    --cta-form-shadow: 0 24px 44px -24px rgba(17, 40, 62, 0.18), 0 0 0 1px rgba(35, 91, 145, 0.08);
    --focus-ring-shadow: 0 0 0 3px rgba(35, 91, 145, 0.16);

    --contact-background: radial-gradient(800px 500px at 100% 0%, rgba(210, 38, 69, 0.08), transparent 60%), var(--surface-dim);
    --social-chip-background: rgba(255, 255, 255, 0.82);
    --social-chip-hover-border: rgba(210, 38, 69, 0.32);
    --social-chip-hover-background: rgba(210, 38, 69, 0.08);
    --map-panel-background: linear-gradient(90deg, rgba(35, 91, 145, 0.06) 1px, transparent 1px), linear-gradient(0deg, rgba(35, 91, 145, 0.06) 1px, transparent 1px), radial-gradient(circle at 52% 48%, rgba(210, 38, 69, 0.14), transparent 0 16px, rgba(210, 38, 69, 0.04) 17px 120px, transparent 121px), var(--surface-container-low);
    --map-panel-overlay-shadow: inset 0 0 0 1px rgba(35, 91, 145, 0.08), inset 0 -80px 90px rgba(237, 243, 248, 0.35);
    --map-link-background: rgba(255, 255, 255, 0.9);
    --map-link-border: 1px solid rgba(35, 91, 145, 0.18);
    --map-link-hover-border: rgba(210, 38, 69, 0.36);

    --theme-toggle-track-background: rgba(229, 237, 246, 0.92);
    --theme-toggle-border: rgba(35, 91, 145, 0.14);
    --theme-toggle-thumb-background: linear-gradient(135deg, #235b91 0%, #d22645 100%);
    --theme-toggle-thumb-shadow: 0 8px 16px rgba(17, 40, 62, 0.16);
    --theme-toggle-text: #4b6077;
    --theme-toggle-ring: 0 0 0 1px rgba(35, 91, 145, 0.06);

    --mobile-topbar-background: rgba(255, 255, 255, 0.9);
    --mobile-dial-background: conic-gradient(from 205deg, rgba(35, 91, 145, 0.22) 0deg 140deg, rgba(210, 38, 69, 0.16) 140deg 230deg, rgba(11, 114, 203, 0.1) 230deg 360deg), repeating-conic-gradient(from 0deg, rgba(35, 91, 145, 0.35) 0deg 0.75deg, transparent 0.75deg 4.8deg);
    --mobile-dial-border: rgba(35, 91, 145, 0.26);
    --mobile-dial-inner-background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.99), rgba(227, 236, 245, 0.98) 78%);
    --mobile-dial-shadow: 0 0 0 1px rgba(35, 91, 145, 0.08), 0 -8px 24px rgba(35, 91, 145, 0.12);
}