:root {
    /* Intuitopup storefront foundation: deep navy with a clear blue accent. */
    color-scheme: dark;

    --bg: #071b3d;
    --bg-subtle: #0a234b;
    --surface: #0d2b59;
    --surface-raised: #12396f;
    --surface-soft: #17477f;

    --text: #f5f9ff;
    --text-secondary: #d6e5f8;
    --muted: #b2c8e4;
    --text-disabled: #92aac6;
    --ink: var(--text);

    --border: #2c5a90;
    --line: var(--border);

    --primary: #4da3ff;
    --primary-hover: #7abaff;
    --primary-soft: #153f73;
    --primary-strong: #9fd1ff;
    --on-primary: #06172f;

    --accent: #d8ff6a;
    --success: #68dfa0;
    --warning: #ffd071;
    --danger: #ff8fa5;
    --info: #8bb9ff;
    --focus-ring: #9fd1ff;

    --shadow-sm: 0 8px 20px rgba(1, 14, 35, .28);
    --shadow-md: 0 18px 42px rgba(1, 14, 35, .38);
    --radius-sm: 10px;
    --radius: 12px;
    --radius-lg: 20px;

    --header-bg: rgba(7, 27, 61, .92);
    --footer-bg: #061630;
    --footer-text: var(--muted);
}

::selection {
    background: var(--primary);
    color: var(--on-primary);
}

.site-body :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.site-body :is(input, textarea, select)::placeholder {
    color: var(--muted);
    opacity: 1;
}