:root {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-2-5: 0.625rem;
    --space-3: 0.75rem;
    --space-3-5: 0.875rem;
    --space-4: 1rem;
    --space-6: 1.5rem;

    --radius-sm: 0.5rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    --color-bg-base: #020617;
    --color-bg-elevated: #0f172a;
    --color-bg-raised: #16202e;
    --color-bg-deep: #0b1222;

    --color-fg-primary: #f8fafc;
    --color-text-strong: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-placeholder: #475569;

    --color-accent: #2dd4bf;
    --color-accent-strong: #14b8a6;
    --color-accent-sky: #0ea5e9;
    --color-info: #38bdf8;
    --color-secondary: #a855f7;
    --color-warning: #fbbf24;
    --color-warning-strong: #fb923c;
    --color-danger: #fb7185;
    --color-danger-soft: #fca5a5;
    --color-inverse: #020617;

    --color-border-soft: rgba(255, 255, 255, 0.04);
    --color-border-subtle: rgba(255, 255, 255, 0.08);
    --color-border-default: rgba(255, 255, 255, 0.1);
    --color-border-strong: rgba(148, 163, 184, 0.18);
    --color-border-strong-soft: rgba(148, 163, 184, 0.16);
    --color-border-muted: rgba(148, 163, 184, 0.2);
    --color-border-input: rgba(148, 163, 184, 0.25);

    --color-surface-panel: rgba(255, 255, 255, 0.03);
    --color-surface-panel-soft: rgba(255, 255, 255, 0.022);
    --color-surface-card: rgba(15, 23, 42, 0.55);
    --color-surface-card-alt: rgba(22, 30, 46, 0.4);
    --color-surface-card-alt-hover: rgba(22, 30, 46, 0.6);
    --color-surface-chip: rgba(15, 23, 42, 0.4);
    --color-surface-input: rgba(15, 23, 42, 0.6);
    --color-surface-input-focus: rgba(15, 23, 42, 0.9);
    --color-surface-modal: rgba(8, 12, 20, 0.9);
    --color-surface-option: rgba(15, 23, 42, 0.55);
    --color-surface-option-hover: rgba(15, 23, 42, 0.7);
    --color-surface-primary-inverse: rgba(255, 255, 255, 0.92);
    --color-surface-primary-inverse-hover: #ffffff;

    --glass-panel-blur: 12px;
    --glass-panel-blur-strong: 16px;
    --glass-card-blur: 16px;
    --glass-card-blur-soft: 12px;

    --shadow-glass-card: 0 10px 24px -18px rgba(15, 23, 42, 0.7);
    --shadow-glass-card-hover: 0 12px 28px -18px rgba(15, 23, 42, 0.8);
    --shadow-glass-card-landing: 0 14px 32px -20px rgba(15, 23, 42, 0.8);
    --shadow-glass-card-landing-hover: 0 18px 40px -20px rgba(15, 23, 42, 0.9);
    --shadow-glass-card-alt: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    --shadow-glass-card-alt-hover: 0 20px 40px -5px rgba(0, 0, 0, 0.4);
    --shadow-plan-card: 0 8px 18px -14px rgba(15, 23, 42, 0.45);
    --shadow-plan-card-hover: 0 10px 20px -16px rgba(15, 23, 42, 0.5);
    --shadow-glass-panel-landing: 0 18px 60px rgba(0, 0, 0, 0.35);
    --shadow-modal-card: 0 24px 60px -35px rgba(15, 23, 42, 0.9);
    --shadow-accent-button: 0 4px 12px rgba(45, 212, 191, 0.2);

    --glass-card-hover-border: rgba(45, 212, 191, 0.2);
    --glass-card-hover-border-strong: rgba(45, 212, 191, 0.25);
    --glass-card-hover-border-alt: rgba(45, 212, 191, 0.3);
    --plan-card-featured-border: rgba(45, 212, 191, 0.45);
    --payment-option-hover-border: rgba(45, 212, 191, 0.35);

    --status-chip-bg: rgba(15, 23, 42, 0.4);
    --status-chip-border: rgba(148, 163, 184, 0.2);
    --status-chip-text: #cbd5f5;
    --status-live-bg: rgba(45, 212, 191, 0.12);
    --status-live-border: rgba(45, 212, 191, 0.3);
    --status-live-text: #5eead4;
    --status-demo-bg: rgba(251, 191, 36, 0.12);
    --status-demo-border: rgba(251, 191, 36, 0.3);
    --status-demo-text: #fbbf24;
    --status-trial-bg: rgba(14, 165, 233, 0.12);
    --status-trial-border: rgba(14, 165, 233, 0.3);
    --status-trial-text: #38bdf8;
    --status-warn-bg: rgba(251, 146, 60, 0.12);
    --status-warn-border: rgba(251, 146, 60, 0.3);
    --status-warn-text: #fb923c;
    --status-neutral-bg: rgba(148, 163, 184, 0.12);
    --status-neutral-border: rgba(148, 163, 184, 0.3);
    --status-neutral-text: #cbd5e1;
    --status-inactive-bg: rgba(248, 113, 113, 0.12);
    --status-inactive-border: rgba(248, 113, 113, 0.3);
    --status-inactive-text: #fca5a5;

    --bg-canvas-app: radial-gradient(circle at top left, var(--color-bg-elevated), var(--color-bg-base));
    --bg-canvas-landing: radial-gradient(circle at top left, var(--color-bg-elevated), var(--color-bg-base));
    --app-ambient-layer:
        radial-gradient(680px circle at 8% -8%, rgba(45, 212, 191, 0.1), transparent 56%),
        radial-gradient(820px circle at 100% 2%, rgba(14, 165, 233, 0.08), transparent 52%),
        radial-gradient(880px circle at 50% 115%, rgba(168, 85, 247, 0.05), transparent 58%);
    --app-grid-layer:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
    --app-grid-opacity: 0.028;
    --landing-ambient-layer:
        radial-gradient(700px circle at 10% -10%, rgba(45, 212, 191, 0.14), transparent 60%),
        radial-gradient(900px circle at 92% 0%, rgba(14, 165, 233, 0.12), transparent 55%),
        radial-gradient(900px circle at 50% 115%, rgba(45, 212, 191, 0.06), transparent 55%);
    --landing-grid-layer:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    --landing-grid-opacity: 0.04;

    --kpi-teal-start: rgba(45, 212, 191, 0.08);
    --kpi-sky-start: rgba(14, 165, 233, 0.08);
    --kpi-purple-start: rgba(168, 85, 247, 0.08);

    --focus-ring-outline: 2px solid rgba(45, 212, 191, 0.55);
    --focus-ring-offset: 3px;
    --focus-ring-radius: 16px;

    --table-row-hover-bg: rgba(255, 255, 255, 0.03);
    --scrollbar-track-transparent: transparent;
    --scrollbar-track-soft: rgba(0, 0, 0, 0.2);
    --scrollbar-track-ui: rgba(13, 20, 24, 0.5);
    --scrollbar-thumb-default: rgba(255, 255, 255, 0.1);
    --scrollbar-thumb-soft: rgba(255, 255, 255, 0.15);
    --scrollbar-thumb-soft-hover: rgba(255, 255, 255, 0.25);
    --scrollbar-thumb-accent: rgba(45, 212, 191, 0.3);
    --scrollbar-thumb-accent-strong: rgba(45, 212, 191, 0.6);

    --bg-0: var(--color-bg-base);
    --bg-1: var(--color-bg-elevated);
    --fg-0: var(--color-fg-primary);
    --muted-0: var(--color-text-muted);
    --brand-0: var(--color-accent);
    --brand-1: var(--color-accent-sky);

    --ui-bg-grad-1: var(--color-bg-elevated);
    --ui-bg-grad-2: var(--color-bg-base);
    --ui-bg-solid: var(--color-bg-base);
    --ui-text: var(--color-text-secondary);
    --ui-text-muted: var(--color-text-muted);
    --ui-text-strong: var(--color-text-strong);
    --ui-panel-bg: rgba(13, 20, 24, 0.85);
    --ui-panel-border: var(--color-border-subtle);
    --ui-card-bg: var(--color-surface-card-alt);
    --ui-card-bg-hover: var(--color-surface-card-alt-hover);
    --ui-card-border: rgba(255, 255, 255, 0.06);
    --ui-accent: var(--color-accent);
    --ui-danger: var(--color-danger);
    --ui-danger-strong: #f43f5e;
    --ui-secondary: var(--color-secondary);
    --ui-info: var(--color-info);
    --ui-border: var(--color-border-default);
    --ui-grid: rgba(255, 255, 255, 0.05);
    --ui-tooltip-bg: rgba(13, 20, 24, 0.95);
    --ui-tooltip-border: var(--color-border-default);
    --ui-crosshair: rgba(148, 163, 184, 0.35);
    --ui-scrollbar-track: var(--scrollbar-track-ui);
    --ui-scrollbar-thumb: var(--scrollbar-thumb-accent);
    --ui-scrollbar-thumb-hover: var(--scrollbar-thumb-accent-strong);
    --ui-table-row-hover: var(--table-row-hover-bg);
    --ui-select-bg: rgba(22, 34, 40, 0.6);
    --ui-select-text: #e2e8f0;
    --ui-select-border: var(--color-border-default);
}