/* Jumans: components consume semantic roles. See docs/design-system.md. */
:root {
    /* Base palette */
    --brand-blue-300: #00d4f5;
    --brand-blue-400: #35b9f5;
    --brand-blue-500: #009dff;
    --brand-blue-700: #0066ad;
    --brand-blue-800: #00558f;
    --neutral-0: #ffffff;
    --brand-orange-300: #ffac73;
    --brand-orange-500: #ff914d;
    --brand-orange-800: #994015;
    --neutral-50: #f0f2f5;
    --neutral-200: #d7e1eb;
    --neutral-400: #a8b5c2;
    --neutral-600: #4b6072;
    --neutral-700: #36576a;
    --neutral-800: #0a1822;
    --neutral-900: #0c1b26;
    --neutral-950: #101216;
    --neutral-deep: #07131c;
    --neutral-on-action: #04141d;
    --status-red-light: #ff9b9b;
    --status-red-dark: #b42332;
    --status-green-light: #72dfad;
    --status-green-dark: #146c43;

    /* Local variable fonts; Latin and Cyrillic subsets, see fonts/SOURCES.md. */
    --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-family-body: "Inter", var(--font-family-sans);
    --font-family-heading: "Montserrat", var(--font-family-sans);
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-size-100: 0.875rem;
    --font-size-200: 1rem;
    --font-size-300: 1.125rem;
    --font-size-400: 1.3125rem;
    --font-size-500: clamp(1.875rem, 4vw, 2.875rem);
    --font-size-600: clamp(2.375rem, 6vw, 4.5rem);
    --line-height-tight: 1.15;
    --line-height-heading: 1.15;
    --line-height-body: 1.6;
    --letter-spacing-tight: 0;
    --letter-spacing-normal: 0;
    --letter-spacing-label: 0.25em;

    /* Base layout */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --radius-sm: 0.625rem;
    --radius-md: 1rem;

    /* Semantic colors: dark theme by default. */
    --color-bg-page: var(--neutral-950);
    --color-bg-surface: var(--neutral-900);
    --color-bg-deep: var(--neutral-deep);
    --color-bg-input: var(--neutral-800);
    --color-bg-raised: var(--neutral-800);
    --color-text-primary: var(--neutral-50);
    --color-text-secondary: var(--neutral-400);
    --color-text-muted: var(--neutral-400);
    --color-brand-mark: var(--brand-blue-500);
    --color-accent: var(--brand-blue-400);
    --color-accent-secondary: var(--brand-orange-500);
    --color-link: var(--brand-blue-400);
    --color-link-hover: var(--brand-blue-300);
    --color-action-primary: var(--brand-blue-400);
    --color-action-primary-hover: var(--brand-blue-300);
    --color-action-primary-active: var(--brand-blue-500);
    --color-action-secondary: var(--brand-orange-500);
    --color-action-secondary-hover: var(--brand-orange-300);
    --color-action-secondary-surface: color-mix(in srgb, var(--brand-orange-500) 10%, transparent);
    --color-action-glow: color-mix(in srgb, var(--brand-blue-300) 35%, transparent);
    --color-on-action-primary: var(--neutral-on-action);
    --color-border-subtle: var(--neutral-700);
    --color-border-control: var(--neutral-400);
    --color-focus-ring: var(--brand-blue-400);
    --color-header-bg: color-mix(in srgb, var(--color-bg-deep) 82%, transparent);
    --color-error: var(--status-red-light);
    --color-success: var(--status-green-light);
    --color-disabled-bg: var(--neutral-800);
    --color-disabled-text: var(--neutral-400);

    /* AmbientGlow semantic roles; independent of existing surface/color roles. */
    --ambient-glow-enabled: 1;
    --ambient-glow-color: var(--brand-blue-700);
    --ambient-glow-intensity: 0.30;
    --ambient-glow-radius: clamp(24rem, 60vw, 48rem);
    --ambient-glow-inertia-ms: 1100;
    --ambient-glow-morph-period-ms: 24000;
    --ambient-glow-morph-strength: 0.16;
    --ambient-glow-static-x: 50vw;
    --ambient-glow-static-y: 35vh;
    --ambient-glow-surface-opacity: 78%;

    /* Semantic typography */
    --font-body-family: var(--font-family-body);
    --font-body-size: var(--font-size-200);
    --font-body-weight: var(--font-weight-regular);
    --font-body-line-height: var(--line-height-body);
    --font-body-letter-spacing: var(--letter-spacing-normal);
    --font-heading-family: var(--font-family-heading);
    --font-heading-weight: var(--font-weight-bold);
    --font-heading-line-height: var(--line-height-heading);
    --font-heading-letter-spacing: var(--letter-spacing-tight);
    --font-heading-xl-size: var(--font-size-600);
    --font-heading-xl-line-height: var(--line-height-tight);
    --font-heading-lg-size: var(--font-size-500);
    --font-heading-md-size: var(--font-size-400);
    --font-small-size: var(--font-size-100);
    --font-lead-size: var(--font-size-300);
    --font-eyebrow-size: 0.75rem;
    --font-card-body-size: 0.9375rem;
    --font-card-heading-weight: var(--font-weight-semibold);
    --font-label-weight: var(--font-weight-semibold);
    --font-label-letter-spacing: var(--letter-spacing-label);

    /* Semantic layout */
    /* Container includes its gutters, matching reference .wrap. */
    --layout-container-max: 75rem;
    --layout-gutter: var(--space-6);
    --layout-section-gap: var(--space-28);
    --layout-content-gap: var(--space-6);
    --layout-text-max: 65ch;
    --layout-heading-max: 51.25rem;
    --layout-lead-max: 45rem;
    --card-padding: var(--space-8);
    --card-content-gap: 0.875rem;
    --card-icon-size: 1.875rem;
    --card-hover-lift: -0.25rem;
    --carousel-frame-padding: 0.875rem;
    --font-product-feature-size: 1.0625rem;
    --font-step-heading-size: 1.25rem;
    --font-step-number-size: 1.75rem;
    --layout-process-max: 53.75rem;
    --font-faq-question-size: 1.125rem;
    --font-control-label-size: 0.8125rem;
    --panel-padding: 2.25rem;
    --panel-radius: 1.25rem;
    --font-error-code-size: min(clamp(4rem, 10vw, 8rem), 24vw);
    --color-card-alt-border: color-mix(in srgb, var(--color-accent-secondary) 70%, transparent);
    --color-hero-glow: color-mix(in srgb, var(--color-accent) 18%, transparent);
    --color-hero-plane: color-mix(in srgb, var(--color-bg-surface) 82%, var(--color-accent));
    --control-radius: var(--radius-sm);
    --card-radius: var(--radius-md);
    --focus-ring-width: 0.1875rem;
    --focus-ring-offset: 0.1875rem;
    --header-height: 4.75rem;
    --header-blur: 0.625rem;
    --logo-width: 8rem;
    --font-button-size: 0.9375rem;
    --button-padding-block: var(--space-4);
    --button-padding-inline: var(--space-7);
    --motion-duration-fast: 250ms;
    --motion-duration-card: 300ms;
    --motion-duration-reveal: 700ms;
    --motion-reveal-offset: var(--space-6);
    --motion-easing: ease;
    --motion-icon-shift: 0.25rem;
}

@media (width <= 60rem) {
    :root { --layout-section-gap: 5rem; }
}

/* Document theme: <html data-theme="light">. Brand mark stays bright blue. */
:root[data-theme="light"] {
    --color-bg-page: var(--neutral-50);
    --color-bg-surface: var(--neutral-0);
    --color-bg-deep: var(--neutral-200);
    --color-bg-input: var(--neutral-0);
    --color-bg-raised: var(--neutral-200);
    --color-text-primary: var(--neutral-950);
    --color-text-secondary: var(--neutral-700);
    --color-text-muted: var(--neutral-600);
    --color-accent: var(--brand-blue-700);
    --color-link: var(--brand-blue-700);
    --color-link-hover: var(--brand-blue-800);
    --color-action-primary: var(--brand-blue-700);
    --color-action-primary-hover: var(--brand-blue-800);
    --color-action-primary-active: var(--neutral-900);
    --color-on-action-primary: var(--neutral-0);
    --color-accent-secondary: var(--brand-orange-800);
    --color-card-alt-border: var(--color-border-subtle);
    --color-action-secondary: var(--brand-orange-800);
    --color-action-secondary-hover: var(--neutral-950);
    --color-border-subtle: var(--neutral-200);
    --color-border-control: var(--neutral-600);
    --color-focus-ring: var(--brand-blue-700);
    --color-error: var(--status-red-dark);
    --color-success: var(--status-green-dark);
    --color-disabled-bg: var(--neutral-200);
    --color-disabled-text: var(--neutral-600);
}

/* Without JS, follow the system only while no explicit document theme exists.
   Keep these roles identical to the explicit light-theme block above. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --color-bg-page: var(--neutral-50);
        --color-bg-surface: var(--neutral-0);
        --color-bg-deep: var(--neutral-200);
        --color-bg-input: var(--neutral-0);
        --color-bg-raised: var(--neutral-200);
        --color-text-primary: var(--neutral-950);
        --color-text-secondary: var(--neutral-700);
        --color-text-muted: var(--neutral-600);
        --color-accent: var(--brand-blue-700);
        --color-link: var(--brand-blue-700);
        --color-link-hover: var(--brand-blue-800);
        --color-action-primary: var(--brand-blue-700);
        --color-action-primary-hover: var(--brand-blue-800);
        --color-action-primary-active: var(--neutral-900);
        --color-on-action-primary: var(--neutral-0);
        --color-accent-secondary: var(--brand-orange-800);
        --color-card-alt-border: var(--color-border-subtle);
        --color-action-secondary: var(--brand-orange-800);
        --color-action-secondary-hover: var(--neutral-950);
        --color-border-subtle: var(--neutral-200);
        --color-border-control: var(--neutral-600);
        --color-focus-ring: var(--brand-blue-700);
        --color-error: var(--status-red-dark);
        --color-success: var(--status-green-dark);
        --color-disabled-bg: var(--neutral-200);
        --color-disabled-text: var(--neutral-600);
    }
}