/* CSS Custom Properties / Design Tokens */
:root {
    color-scheme: light dark;

    /* Surfaces */
    --bg-gradient: linear-gradient(180deg, #080a12 0%, #111827 48%, #0b111c 100%);
    --bg-gradient-light: linear-gradient(180deg, #f8fbff 0%, #eaf4ff 48%, #f6f8fb 100%);
    --surface: rgba(17, 24, 39, 0.78);
    --surface-strong: rgba(10, 15, 26, 0.92);
    --surface-light: rgba(255, 255, 255, 0.84);
    --surface-strong-light: rgba(255, 255, 255, 0.96);
    --line: rgba(154, 171, 197, 0.24);
    --line-strong: rgba(154, 171, 197, 0.42);
    --line-light: rgba(28, 42, 66, 0.16);

    /* Accent Colors */
    --accent: #4f95f4;
    --accent-strong: #2266d6;
    --accent-mint: #2dd4bf;
    --accent-coral: #f97363;
    --accent-amber: #f6c453;
    --accent-gradient: linear-gradient(135deg, #4f95f4, #2dd4bf);
    --accent-gradient-hero: linear-gradient(135deg, #4f95f4 0%, #2dd4bf 48%, #f6c453 100%);
    --accent-gradient-hero-light: linear-gradient(135deg, #2266d6 0%, #0f9f92 48%, #d18700 100%);

    /* Text Colors */
    --text-primary: #f7fbff;
    --text-primary-light: #111827;
    --text-muted: rgba(214, 226, 241, 0.74);
    --text-muted-light: rgba(43, 55, 77, 0.76);

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    --spacing-2xl: 6rem;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --radius-xl: 8px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 12px 24px rgba(4, 9, 20, 0.18);
    --shadow-md: 0 18px 44px rgba(4, 9, 20, 0.28);
    --shadow-lg: 0 30px 80px rgba(4, 9, 20, 0.36);
    --shadow-xl: 0 36px 90px rgba(4, 9, 20, 0.42);

    /* Transitions */
    --transition-fast: 0.18s ease;
    --transition-base: 0.28s ease;
    --transition-slow: 0.42s ease;
}