:root {
    color-scheme: dark;

    /*
     * Light / Dark Theme System V1 — DARK is the default, unscoped :root
     * palette (unchanged from the approved Phase 1 values below) so a page
     * with no [data-theme] attribute at all — the no-JS fallback — still
     * renders correctly dark. [data-theme="light"] further down overrides
     * only the tokens that actually need a different value per theme; see
     * that block for the light palette and for tokens (like --color-scrim)
     * that intentionally stay identical in both themes.
     */
    --color-background: #07111f;
    --color-background-secondary: #0b1728;
    --color-surface: #102238;
    --color-surface-elevated: #142a44;
    --color-primary: #4da3ff;
    --color-primary-hover: #70b5ff;
    --color-accent: #4dd8e8;
    --color-accent-soft: rgba(77, 216, 232, 0.12);
    --color-text: #f5f9ff;
    --color-text-muted: #adbed3;
    --color-text-on-primary: #06111d;
    --color-border: rgba(173, 190, 211, 0.24);
    --color-border-strong: rgba(173, 190, 211, 0.42);
    --color-focus: #4dd8e8;
    --color-header-background: rgba(7, 17, 31, 0.94);
    --color-danger: #ff8080;
    --color-danger-soft: rgba(255, 128, 128, 0.12);

    /*
     * Translucent dark overlays used ON TOP OF real imagery/video (video
     * thumbnail play button, video frame close button) and modal backdrops.
     * Deliberately NOT overridden under [data-theme="light"] — they stay
     * dark/legible in both themes, same as the modal-backdrop allowance —
     * see assets/css/global.css .product-media__play/.video-modal__* /
     * .project-modal__backdrop and responsive.css's play-button hover state.
     */
    --color-scrim: rgba(3, 8, 16, 0.86);
    --color-media-overlay: rgba(7, 17, 31, 0.72);
    --color-media-overlay-strong: rgba(7, 17, 31, 0.85);
    --color-media-overlay-hover: rgba(7, 17, 31, 0.9);

    /*
     * Homepage Hero Media Architecture V1 — same "stays dark/legible in
     * both themes" convention as --color-scrim/--color-media-overlay
     * above, for the copy/scroll-indicator sitting on top of the always-
     * dark hero photo + gradient (assets/css/global.css .home-hero--media)
     * — the normal --color-text/--color-accent tokens invert to dark
     * navy under [data-theme="light"] and would be unreadable there.
     * Values match the dark theme's own --color-text/-muted/--color-accent
     * exactly, just fixed instead of theme-reactive.
     */
    --home-hero-media-text: #f5f9ff;
    --home-hero-media-text-muted: #adbed3;
    --home-hero-media-accent: #4dd8e8;
    --home-hero-media-border: rgba(245, 249, 255, 0.4);

    /* Provisional system typography; replace after official type approval. */
    --font-family-sans: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --font-size-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    --font-size-3xl: clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem);
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.15;
    --line-height-base: 1.6;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --section-space: clamp(3.5rem, 8vw, 7rem);

    --container-max-width: 75rem;
    --container-gutter: 1rem;
    --content-max-width: 45rem;
    --header-height: 4.75rem;
    --touch-target-min: 2.75rem;

    /*
     * Homepage Hero Viewport Polish V1 — .topbar has no fixed height of
     * its own (a flex row sized by its content + padding-block:
     * var(--space-1)), so this formalizes its real single-row rendered
     * height (.topbar__contact-link's own min-height: 1.75rem + the
     * row's 2 * var(--space-1) padding = 2.25rem) as a named token, the
     * same way --header-height already documents .site-header__inner.
     * --combined-header-height then drives the homepage media hero's
     * min-height (assets/css/global.css .home-hero--media) and
     * automatically recomputes at the 64rem breakpoint below, where only
     * --header-height changes — .topbar__inner also switches to
     * flex-wrap: nowrap there, guaranteeing this single-row height holds.
     * On narrower viewports where the topbar's contact links could wrap
     * to two lines, this stays a close estimate rather than a pixel-exact
     * value; min-height only ever adds a little extra hero height in that
     * case, it never clips anything.
     */
    --topbar-height: 2.25rem;
    --combined-header-height: calc(var(--topbar-height) + var(--header-height));

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-pill: 999px;

    --shadow-header: 0 0.75rem 2rem rgba(0, 0, 0, 0.16);
    --shadow-button: 0 0.75rem 1.75rem rgba(77, 163, 255, 0.2);
    --shadow-button-hover: 0 0.9rem 2rem rgba(77, 163, 255, 0.28);

    --transition-fast: 150ms;
    --transition-normal: 220ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    /*
     * Global Motion System V1 tokens. --motion-fast/base map to the
     * existing --transition-fast/--transition-normal values (already
     * within the 150-250ms micro-interaction target) so hover states stay
     * visually unchanged; --motion-slow/--motion-ease/--motion-distance-*/
     * --motion-stagger-step are new and drive the reveal/stagger/ambient
     * system in global.css. Ambient ("no-preference") loop durations live
     * on each animation's own keyframe rule, in the 6-16s range.
     */
    --motion-fast: var(--transition-fast);
    --motion-base: var(--transition-normal);
    --motion-slow: 600ms;
    --motion-ease: var(--ease-standard);
    --motion-distance-sm: 12px;
    --motion-distance-md: 24px;
    --motion-stagger-step: 70ms;
    --motion-stagger-cap: 6;

    --focus-outline-width: 0.1875rem;
    --focus-outline-offset: 0.1875rem;
    --z-header: 100;
}

/*
 * Light / Dark Theme System V1 — light palette. Cool blue-gray/navy
 * direction (never beige/cream) so the page keeps AREaiONX's technical
 * identity instead of reading as generic white-SaaS. --color-accent and
 * --color-primary keep the same cyan/blue hue family as dark mode, just
 * deepened for AA contrast on light surfaces (verified: accent 5.6:1 and
 * primary/white-text 4.9:1 against #fff; muted text 5.8:1; danger 5.7:1).
 * Every token not listed here (including the media-overlay/scrim set
 * above) intentionally keeps its dark-mode value in light mode too.
 */
[data-theme="light"] {
    color-scheme: light;

    --color-background: #eef2f6;
    --color-background-secondary: #e5eaf1;
    --color-surface: #ffffff;
    --color-surface-elevated: #eef1f7;
    --color-primary: #1d6fd8;
    --color-primary-hover: #1550a8;
    --color-accent: #0b7285;
    --color-accent-soft: rgba(11, 114, 133, 0.1);
    --color-text: #0f1f33;
    --color-text-muted: #57677a;
    --color-text-on-primary: #ffffff;
    --color-border: rgba(15, 35, 60, 0.14);
    --color-border-strong: rgba(15, 35, 60, 0.24);
    --color-focus: #0b7285;
    --color-header-background: rgba(255, 255, 255, 0.9);
    --color-danger: #c81e3a;
    --color-danger-soft: rgba(200, 30, 58, 0.1);

    --shadow-header: 0 0.75rem 2rem rgba(15, 35, 60, 0.1);
    --shadow-button: 0 0.75rem 1.75rem rgba(29, 111, 216, 0.22);
    --shadow-button-hover: 0 0.9rem 2rem rgba(29, 111, 216, 0.3);
}