:root {
    /* System */
    color-scheme: dark;

    /* Core backgrounds / surfaces */
    --s-bg: #000000;
    --s-opposite: #ffffff;
    /* app/page background */
    --s-surface-1: #0e0f10;
    /* lowest-elevation surface */
    --s-surface-2: #17181b;
    /* cards/blocks (strong) */
    --s-surface-3: #212328;
    /* cards/blocks (default) */
    --s-surface-4: #27282b;
    /* selected/active surface */
    --s-surface-5: #35383b;
    /* hover surface */

    /* Overlay / blur */
    --s-overlay: rgba(0, 0, 0, 0.70);
    --s-backdrop-blur: blur(12px);

    /* Text */
    --s-text: rgba(235, 235, 235, 0.87);
    --s-text-muted: rgba(255, 255, 255, 0.60);
    --s-text-subtle: #9aa3b2;
    /* labels/tertiary */
    --s-text-on-accent: #ffffff;

    /* Borders / separators */
    --s-border: rgba(255, 255, 255, 0.1);
    --s-border-strong: #4d5158;

    /* Hovers */
    --s-hover-1: rgba(255, 255, 255, 0.04);
    --s-hover-2: rgba(255, 255, 255, 0.09);
    --s-hover-3: rgba(255, 255, 255, 0.12);
    --s-hover-strong: #3f4b5b;

    /* Brand / links / focus */
    --s-accent: #1c87d4;
    --s-accent-strong: #0ea5e9;
    --s-ring: rgba(56, 189, 248, 0.35);
    --s-grey: #6f7680;

    /* accent surface */
    --s-accent-surface-1: #222644;
    /* hover */
    --s-accent-surface-2: #2b3054;
    /* active */
    --s-accent-surface-3: #343a64;
    /* strong */
    --s-accent-surface-4: #1b1f38;

    /* Status */
    --s-success: #388e3c;
    --s-warning: #e8ae00;
    --s-error: #d32f2f;
    --s-error-soft: #ef9a9a;
    --s-error-hover: #b71c1c;

    /* Ripple */
    --s-ripple: rgba(156, 156, 156, 0.20);

    /* Shadows (values used in box-shadow) */
    --s-shadow-ambient: rgba(255, 255, 255, 0.10);
    --s-shadow-ambient-strong: rgba(255, 255, 255, 0.20);
    --s-shadow-elev: 0 4px 30px rgba(0, 0, 0, 0.50);
    --s-shadow-elev-hover: 0 12px 30px rgba(0, 0, 0, 0.45);

    /* Glass */
    --s-glass-bg: rgba(20, 20, 25, 0.80);
    --s-glass-border: rgba(255, 255, 255, 0.10);

    /* Skeleton */
    --s-skeleton-base: #242424;
    --s-skeleton-surface: #0a0c0f;
    --s-skeleton-block: #171a1d;
    --s-skeleton-shine: rgba(255, 255, 255, 0.02);

    /* Gradients / glows */
    --s-gradient-explore: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --s-gradient-create: linear-gradient(135deg, #f093fb 0%, #ca4758 100%);
    --s-gradient-cta: linear-gradient(135deg, #6a7cff, #8f6bff);
    --s-accent-glow: rgba(124, 147, 255, 0.20);

    --s-landing-surface-1: #09090b;
    --s-landing-surface-2: #111113;
    --s-landing-surface-3: #18181b;
    --s-landing-border-default: rgba(255, 255, 255, 0.08);
    --s-landing-border-hover: rgba(129, 140, 248, 0.28);
    --s-landing-text: #f4f4f5;
    --s-landing-text-muted: #a1a1aa;
    --s-landing-text-faint: #52525b;
    --s-landing-accent-primary: #4f46e5;
    --s-landing-accent-secondary: #06b6d4;
    --s-landing-accent-tertiary: #7c3aed;
    --s-landing-glow-primary: rgba(79, 70, 229, 0.14);
    --s-landing-glow-secondary: rgba(6, 182, 212, 0.10);
    --s-landing-glow-tertiary: rgba(124, 58, 237, 0.10);
    --s-landing-success: #22c55e;
    --s-landing-button-primary-hover: #4338ca;

    --app-banner-bg-top: #141416;
    --app-banner-bg-bottom: #101113;
    --app-banner-border: rgba(255, 255, 255, 0.08);

    --app-banner-icon-bg: rgba(255, 255, 255, 0.05);
    --app-banner-icon-border: rgba(255, 255, 255, 0.08);

    --app-banner-action-bg: rgba(255, 255, 255, 0.06);
    --app-banner-action-bg-hover: rgba(255, 255, 255, 0.1);
    --app-banner-action-border: rgba(255, 255, 255, 0.08);
    --app-banner-action-border-hover: rgba(255, 255, 255, 0.14);
    --app-banner-action-text: #fafafa;

    --app-banner-warning-accent: #ffbf47;
    --app-banner-warning-glow: rgba(255, 191, 71, 0.2);

    --app-banner-critical-accent: #ff6b88;
    --app-banner-critical-glow: rgba(255, 107, 136, 0.16);

    --app-banner-info-accent: #7ab8ff;
    --app-banner-info-glow: rgba(122, 184, 255, 0.16);
}

.invert-colors {
    filter: brightness(0) invert(1);
}