:root {
    --bg: #ffffff;
    --panel: #ffffff;

    --text: #0b1220;
    --sub: #5a657a;

    --muted: #f5f7fb;
    --muted2: #eef3fb;

    --border: #e6eaf2;

    --shadow: 0 10px 30px rgba(16, 24, 40, 0.08);

    --radius: 16px;
    --radius2: 12px;

    --blue: #1f6feb;
    --blue2: #0b5bd3;

    --green: #16a34a;
    --green2: #0f8a3d;

    --ok: #16a34a;
    --warn: #f59e0b;
    --bad: #ef4444;
    --info: #1f6feb;

    /* Global Semantic Tokens */
    --surface-base: #f8fafc;
    --surface-elevated: #ffffff;
    --surface-modal: #f7fafc6b;
    --surface-disabled: #e9ecef;

    --text-primary: #0b1220;
    --text-secondary: #5a657a;
    --text-muted: #94a3b8;

    --border-light: #e0e0e0;
    --border-heavy: #cbd5e1;

    /* Gradients */
    --gradient-blue: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-orange: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    --gradient-indigo: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --gradient-green: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-red: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    --gradient-purple: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-teal: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);

    /* Contextual Chips */
    --chip-trial-bg: #f3e8ff;
    --chip-trial-text: #7e22ce;
    --chip-promo-bg: #e0f2fe;
    --chip-promo-text: #0369a1;
}

body.dark-mode {
    --bg: #0f172a;
    --panel: #111827;

    --text: #e5e7eb;
    --sub: #94a3b8;

    --muted: #1f2937;
    --muted2: #1e293b;

    --border: #1f2937;

    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

    /* Global Semantic Tokens */
    --surface-base: #0f172a;
    --surface-elevated: #1e293b;
    --surface-modal: #1e293b;
    --surface-disabled: #334155;

    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;

    --border-light: #334155;
    --border-heavy: #475569;

    /* Gradients */
    --gradient-blue: linear-gradient(135deg, #4f46e5 0%, #581c87 100%);
    --gradient-orange: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    --gradient-indigo: linear-gradient(135deg, #4f46e5 0%, #7e22ce 100%);
    --gradient-green: linear-gradient(135deg, #059669 0%, #047857 100%);
    --gradient-red: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    --gradient-purple: linear-gradient(135deg, #c026d3 0%, #be123c 100%);
    --gradient-teal: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);

    /* Contextual Chips */
    --chip-trial-bg: rgba(126, 34, 206, 0.15);
    --chip-trial-text: #c084fc;
    --chip-promo-bg: rgba(3, 105, 161, 0.15);
    --chip-promo-text: #7dd3fc;
}

/* Global Utility Classes */
.theme-gradient-blue {
    background-image: var(--gradient-blue);
}
.theme-gradient-orange {
    background-image: var(--gradient-orange);
}
.theme-gradient-indigo {
    background-image: var(--gradient-indigo);
}
.theme-gradient-green {
    background-image: var(--gradient-green);
}
.theme-gradient-red {
    background-image: var(--gradient-red);
}
.theme-gradient-purple {
    background-image: var(--gradient-purple);
}
.theme-gradient-teal {
    background-image: var(--gradient-teal);
}

.text-primary {
    color: var(--text-primary) !important;
}
.text-secondary {
    color: var(--text-secondary) !important;
}
.text-muted {
    color: var(--text-muted) !important;
}

.theme-chip {
    padding: 0 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    height: 24px;
    letter-spacing: 0.5px;
}
.theme-chip.chip-trial {
    background-color: var(--chip-trial-bg) !important;
    color: var(--chip-trial-text) !important;
}
.theme-chip.chip-promo {
    background-color: var(--chip-promo-bg) !important;
    color: var(--chip-promo-text) !important;
}