:root {
    /*
     * QuolexIQ™ website design tokens
     *
     * These variables define the shared visual language for the public website.
     * Page and component styles should reference these values instead of
     * introducing unrelated colors, spacing values, or animation timings.
     */
    /* Core backgrounds */
    --qxi-color-background: #050816;
    --qxi-color-background-deep: #02040c;
    --qxi-color-background-soft: #091126;
    --qxi-color-background-elevated: #0d1730;
    /* Translucent surfaces */
    --qxi-color-surface: rgba(13, 23, 48, 0.78);
    --qxi-color-surface-strong: rgba(17, 31, 61, 0.92);
    --qxi-color-surface-soft: rgba(255, 255, 255, 0.045);
    --qxi-color-surface-hover: rgba(255, 255, 255, 0.08);
    /* Brand colors */
    --qxi-color-primary: #4f7cff;
    --qxi-color-primary-bright: #6d92ff;
    --qxi-color-primary-deep: #3159d9;
    --qxi-color-cyan: #39d7ff;
    --qxi-color-cyan-bright: #76e7ff;
    --qxi-color-cyan-deep: #1599c6;
    --qxi-color-purple: #9b6dff;
    --qxi-color-purple-bright: #b99aff;
    --qxi-color-purple-deep: #7045d4;
    --qxi-color-teal: #37e1c2;
    --qxi-color-green: #48d88a;
    --qxi-color-warning: #f6bf55;
    --qxi-color-danger: #ff6b7a;
    /* Text */
    --qxi-color-text: #f5f8ff;
    --qxi-color-text-soft: #c7d2ea;
    --qxi-color-text-muted: #8e9ab5;
    --qxi-color-text-faint: #66728c;
    --qxi-color-text-dark: #11182a;
    /* Borders */
    --qxi-color-border: rgba(156, 180, 230, 0.16);
    --qxi-color-border-strong: rgba(132, 169, 255, 0.28);
    --qxi-color-border-glow: rgba(79, 124, 255, 0.56);
    /* Gradients */
    --qxi-gradient-brand: linear-gradient( 135deg, var(--qxi-color-primary) 0%, var(--qxi-color-cyan) 48%, var(--qxi-color-purple) 100% );
    --qxi-gradient-brand-text: linear-gradient( 90deg, #8eacff 0%, #63e4ff 48%, #bd9cff 100% );
    --qxi-gradient-page: radial-gradient( circle at 50% 30%, rgba(50, 88, 189, 0.2) 0%, transparent 38% ), radial-gradient( circle at 15% 15%, rgba(57, 215, 255, 0.08) 0%, transparent 32% ), radial-gradient( circle at 85% 20%, rgba(155, 109, 255, 0.09) 0%, transparent 34% ), linear-gradient( 180deg, var(--qxi-color-background) 0%, var(--qxi-color-background-deep) 100% );
    --qxi-gradient-surface: linear-gradient( 145deg, rgba(22, 39, 76, 0.88) 0%, rgba(8, 15, 34, 0.82) 100% );
    --qxi-gradient-sphere: radial-gradient( circle at 35% 28%, rgba(126, 231, 255, 0.32) 0%, rgba(79, 124, 255, 0.18) 28%, rgba(24, 52, 112, 0.46) 58%, rgba(4, 9, 24, 0.96) 100% );
    /* Shadows and glow */
    --qxi-shadow-small: 0 10px 30px rgba(0, 0, 0, 0.18);
    --qxi-shadow-medium: 0 18px 55px rgba(0, 0, 0, 0.3);
    --qxi-shadow-large: 0 30px 90px rgba(0, 0, 0, 0.46);
    --qxi-shadow-primary: 0 0 36px rgba(79, 124, 255, 0.28);
    --qxi-shadow-cyan: 0 0 38px rgba(57, 215, 255, 0.22);
    --qxi-shadow-purple: 0 0 38px rgba(155, 109, 255, 0.2);
    /* Typography */
    --qxi-font-heading: "Space Grotesk", "Segoe UI", sans-serif;
    --qxi-font-body: "Inter", "Segoe UI", sans-serif;
    --qxi-font-size-xs: 0.75rem;
    --qxi-font-size-sm: 0.875rem;
    --qxi-font-size-base: 1rem;
    --qxi-font-size-md: 1.125rem;
    --qxi-font-size-lg: 1.25rem;
    --qxi-font-size-xl: 1.5rem;
    --qxi-font-size-2xl: 2rem;
    --qxi-font-size-3xl: 2.75rem;
    --qxi-font-size-4xl: 3.75rem;
    --qxi-font-size-5xl: 5rem;
    --qxi-line-height-tight: 1.08;
    --qxi-line-height-heading: 1.18;
    --qxi-line-height-body: 1.7;
    --qxi-letter-spacing-tight: -0.035em;
    --qxi-letter-spacing-heading: -0.02em;
    --qxi-letter-spacing-wide: 0.08em;
    --qxi-letter-spacing-kicker: 0.16em;
    /* Spacing */
    --qxi-space-1: 0.25rem;
    --qxi-space-2: 0.5rem;
    --qxi-space-3: 0.75rem;
    --qxi-space-4: 1rem;
    --qxi-space-5: 1.25rem;
    --qxi-space-6: 1.5rem;
    --qxi-space-8: 2rem;
    --qxi-space-10: 2.5rem;
    --qxi-space-12: 3rem;
    --qxi-space-16: 4rem;
    --qxi-space-20: 5rem;
    --qxi-space-24: 6rem;
    --qxi-space-32: 8rem;
    /* Borders and radii */
    --qxi-border-width: 1px;
    --qxi-radius-sm: 0.625rem;
    --qxi-radius-md: 0.875rem;
    --qxi-radius-lg: 1.25rem;
    --qxi-radius-xl: 1.75rem;
    --qxi-radius-2xl: 2.5rem;
    --qxi-radius-pill: 999px;
    --qxi-radius-circle: 50%;
    /* Layout */
    --qxi-site-max-width: 1440px;
    --qxi-content-max-width: 1180px;
    --qxi-reading-max-width: 760px;
    --qxi-header-height: 80px;
    /* Animation */
    --qxi-duration-fast: 160ms;
    --qxi-duration-normal: 280ms;
    --qxi-duration-slow: 520ms;
    --qxi-duration-ambient: 8000ms;
    --qxi-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --qxi-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
    /* Layering */
    --qxi-z-background: 0;
    --qxi-z-content: 10;
    --qxi-z-header: 100;
    --qxi-z-overlay: 500;
    --qxi-z-modal: 1000;
}