:root {
    --font-sans: 'Inter', 'Segoe UI', Arial, sans-serif;

    /* Primitive palette from the approved Figma values. */
    --color-bg: #242625;
    --color-card: #1e201f;
    --color-surface: #2a2c2b;
    --color-muted: #a3a3ad;
    --color-heading: #f5f5f7;
    --color-accent: #f6b129;
    --color-accent-active: #e6a119;

    /* Semantic aliases used across the site. */
    --color-bg-page: var(--color-bg);
    --color-bg-chrome: var(--color-card);
    --color-bg-control: var(--color-surface);
    --color-text-primary: var(--color-heading);
    --color-text-secondary: var(--color-muted);
    --color-text-accent: var(--color-accent);
    --color-border-strong: rgba(64, 66, 67, 0.72);
    --color-border-soft: rgba(64, 66, 67, 0.48);
    --color-accent-ghost: rgba(246, 177, 41, 0.1);
    --color-accent-ghost-hover: rgba(246, 177, 41, 0.16);
    --color-accent-ghost-active: rgba(246, 177, 41, 0.18);
    --color-accent-border-subtle: rgba(246, 177, 41, 0.28);
    --color-accent-border-soft: rgba(246, 177, 41, 0.4);
    --color-accent-border-medium: rgba(246, 177, 41, 0.45);
    --color-accent-border-strong: rgba(246, 177, 41, 0.65);
    --color-accent-glow: rgba(246, 177, 41, 0.12);
    --color-accent-glow-medium: rgba(246, 177, 41, 0.15);
    --color-accent-glow-strong: rgba(246, 177, 41, 0.18);
    --color-accent-opaque-soft: rgba(246, 177, 41, 0.9);
    --color-accent-glow-transparent: rgba(246, 177, 41, 0);
    --color-overlay-scrim: rgba(15, 16, 17, 0.36);
    --color-overlay-scrim-soft: rgba(15, 16, 17, 0.24);
    --color-overlay-surface: rgba(26, 28, 29, 0.42);
    --color-shadow-text: rgba(0, 0, 0, 0.45);
    --color-border-image: rgba(0, 0, 0, 0.12);
    --color-border-image-soft: rgba(0, 0, 0, 0.08);

    --color-text: var(--color-heading);
    --color-text-muted: var(--color-muted);
    --color-primary: var(--color-accent);
    --color-primary-contrast: var(--color-bg);
    --color-border: var(--color-border-strong);
    --color-surface-muted: var(--color-card);
    --color-danger: #ef9a9a;

    --color-status-warning: #f1b744;
    --color-status-warning-bg: rgba(246, 177, 41, 0.12);
    --color-status-warning-border: rgba(246, 177, 41, 0.45);
    --color-status-info: #83ade7;
    --color-status-info-bg: rgba(96, 145, 214, 0.12);
    --color-status-info-border: rgba(96, 145, 214, 0.5);
    --color-status-success: #53d083;
    --color-status-success-bg: rgba(99, 196, 129, 0.1);
    --color-status-success-border: rgba(99, 196, 129, 0.55);
    --color-status-error: #ef9a9a;
    --color-status-error-strong: #f84a4a;
    --color-status-error-bg: rgba(226, 103, 103, 0.1);
    --color-status-error-border: rgba(226, 103, 103, 0.55);
    --color-status-error-surface: #2b2020;
    --color-status-error-surface-border: #532a2a;

    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;

    --shadow-card: none;
    --shadow-soft: none;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-panel-lg: 33px;
    --space-section-gap: 40px;
    --space-section-title-gap: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.02;
    --line-height-heading: 1.08;
    --line-height-copy: 1.55;
    --line-height-caption: 1.25;

    --font-size-page-title: 48px;
    --font-size-section-title: 36px;
    --font-size-card-title: 24px;
    --font-size-card-title-sm: 22px;
    --font-size-text-xl: 20px;
    --font-size-text-lg: 18px;
    --font-size-text-md: 16px;
    --font-size-text-sm: 14px;
    --font-size-text-xs: 12px;

    --size-icon-md: 20px;
    --size-icon-lg: 26px;
    --size-icon-feature: 60px;
    --size-icon-feature-glyph: 28px;
    --size-icon-service-glyph: 40px;
    --size-icon-square: 56px;
    --size-logo-lg: 80px;
    --size-social-control: 36px;
    --size-social-glyph: 15px;
    --size-button-height: 60px;

    --container-width: 1216px;
    --transition-fast: 180ms ease;
}

@media (max-width: 900px) {
    :root {
        --font-size-page-title: 34px;
        --font-size-section-title: 28px;
        --font-size-text-lg: 16px;
    }
}
