/* style.css — design system variables + global base styles */

:root {
    /* Primary palette */
    --primary: #2551C4;
    --secondary: #6B4CC0;
    --tertiary: #0F7A6C;

    /* Domain accent colors — light mode */
    --accent-banking: #2551C4;
    --accent-documentutils: #6B4CC0;
    --accent-devtools: #0F7A6C;
    --accent-leads: #D4731A;
    --accent-settings: #6B7280;

    /* Surface & text */
    --surface: #FFFFFF;
    --surface-variant: #F3F4F6;
    --on-surface: #1A1A2E;
    --on-surface-variant: #4A4A68;
    --border-color: #E5E7EB;

    /* Corner radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 32px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(26, 26, 46, 0.06), 0 1px 3px rgba(26, 26, 46, 0.08);
    --shadow-md: 0 4px 12px rgba(26, 26, 46, 0.08), 0 2px 4px rgba(26, 26, 46, 0.06);
    --shadow-lg: 0 16px 32px rgba(26, 26, 46, 0.14), 0 4px 10px rgba(26, 26, 46, 0.08);

    color-scheme: light;
}

/* Dark mode — respects system preference unless overridden by data-theme */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface: #1A1A2E;
        --surface-variant: #2A2A3E;
        --on-surface: #E8E8F0;
        --on-surface-variant: #A0A0B8;
        --border-color: #34344A;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.25);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
        --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.45), 0 6px 14px rgba(0, 0, 0, 0.3);
        color-scheme: dark;
    }
}

/* Explicit toggle wins in both directions */
:root[data-theme="dark"] {
    --surface: #1A1A2E;
    --surface-variant: #2A2A3E;
    --on-surface: #E8E8F0;
    --on-surface-variant: #A0A0B8;
    --border-color: #34344A;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.45), 0 6px 14px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
}

/* Cross-page navigation crossfade — this is a static multi-page site (no SPA
   router), so every link is a real navigation. Opting into the View
   Transitions API gives supporting browsers a smooth fade instead of the
   default hard white flash; unsupported browsers just get a normal
   navigation, so this is a pure progressive enhancement. */
@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--surface-variant);
    color: var(--on-surface);
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.2s ease, color 0.2s ease;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}