:root {
    --font-family: 'Plus Jakarta Sans', sans-serif;
    --brand-primary: #3B82F6;
    --brand-header: #45B31B;
    --brand-footer: #343A42;
    --brand-secondary: #8B5CF6;
    --brand-background-light: #F3F6FB;
    --brand-card-light: #FFFFFF;
    --brand-text-primary-light: #0F172A;
    --brand-text-secondary-light: #666C79;
    --brand-primary-dark: #3B82F6;
    --brand-background-dark: #000000;
    --brand-card-dark: #121212;
    --brand-text-primary-dark: #FFFFFF;
    --brand-text-secondary-dark: #A1A1AA;
    --brand-border-light: rgba(15,23,42,0.12);
    --brand-border-dark: rgba(255,255,255,0.10);
    --color-on-primary: #FFFFFF;
    --color-points: #F59E0B;
    --public-button-radius: 999px;
    --public-surface-radius: 20px;
    --public-surface-radius-sm: 12px;
    --public-surface-shadow: 0 12px 28px rgba(15,23,42,0.08);
    --public-motion-duration: 18s;
    --public-motion-opacity: 0.58;
}

html.light {
    --color-primary: var(--brand-primary);
    --color-header-custom: var(--brand-header);
    --color-footer-custom: var(--brand-footer);
    --color-secondary: var(--brand-secondary);
    --color-background: var(--brand-background-light);
    --color-card: var(--brand-card-light);
    --color-text-primary: var(--brand-text-primary-light);
    --color-text-secondary: var(--brand-text-secondary-light);
    --color-text-muted: #64748B;
    --color-border: var(--brand-border-light);
    --color-border-soft: rgba(148,163,184,0.3);
    --color-surface: #FFFFFF;
    --color-surface-soft: #F8FAFC;
    --color-surface-strong: #FFFFFF;
    --color-header-bg: #FFFFFF;
    --color-nav-bg: #FFFFFF;
    --color-overlay: rgba(15,23,42,0.22);
    --color-input-bg: #FFFFFF;
    --color-input-border: rgba(148,163,184,0.35);
    --color-input-placeholder: #94A3B8;
    --color-success: #16A34A;
    --color-success-soft: rgba(34,197,94,0.14);
    --color-danger: #DC2626;
    --color-danger-soft: rgba(220,38,38,0.14);
    --color-warning: #D97706;
    --color-warning-soft: rgba(217,119,6,0.14);
    --color-info: #2563EB;
    --color-info-soft: rgba(37,99,235,0.14);
    --glass-bg: #FFFFFF;
    --glass-border: rgba(148,163,184,0.28);
    --glass-shadow: 0 12px 28px rgba(15,23,42,0.08);
    --color-shadow-soft: 0 8px 24px rgba(15,23,42,0.08);
    --skeleton-start: rgba(148,163,184,0.15);
    --skeleton-mid: rgba(148,163,184,0.3);
    --skeleton-end: rgba(148,163,184,0.15);
    --color-select-option-bg: #FFFFFF;
}

html.dark {
    --color-primary: var(--brand-primary-dark);
    --color-header-custom: var(--brand-header);
    --color-footer-custom: #0A0A0A;
    --color-secondary: var(--brand-secondary);
    --color-background: var(--brand-background-dark);
    --color-card: var(--brand-card-dark);
    --color-popup-solid: #161616;
    --color-text-primary: var(--brand-text-primary-dark);
    --color-text-secondary: var(--brand-text-secondary-dark);
    --color-text-muted: #71717A;
    --color-border: var(--brand-border-dark);
    --color-border-soft: rgba(255,255,255,0.08);
    --color-surface: var(--brand-card-dark);
    --color-surface-soft: #0A0A0A;
    --color-surface-strong: #1C1C1C;
    --color-header-bg: #0A0A0A;
    --color-nav-bg: #0A0A0A;
    --color-overlay: rgba(0,0,0,0.72);
    --color-input-bg: #161616;
    --color-input-border: rgba(255,255,255,0.14);
    --color-input-placeholder: #71717A;
    --color-success: #22C55E;
    --color-success-soft: rgba(34,197,94,0.16);
    --color-danger: #F87171;
    --color-danger-soft: rgba(248,113,113,0.16);
    --color-warning: #FBBF24;
    --color-warning-soft: rgba(251,191,36,0.16);
    --color-info: #60A5FA;
    --color-info-soft: rgba(96,165,250,0.16);
    --glass-bg: var(--brand-card-dark);
    --glass-border: rgba(255,255,255,0.10);
    --glass-shadow: 0 18px 42px rgba(0,0,0,0.60);
    --color-shadow-soft: 0 16px 36px rgba(0,0,0,0.50);
    --skeleton-start: rgba(255,255,255,0.05);
    --skeleton-mid: rgba(255,255,255,0.12);
    --skeleton-end: rgba(255,255,255,0.05);
    --color-select-option-bg: #161616;
}

html:not(.light):not(.dark) {
    --color-primary: var(--brand-primary);
    --color-header-custom: var(--brand-header);
    --color-footer-custom: var(--brand-footer);
    --color-secondary: var(--brand-secondary);
    --color-background: var(--brand-background-light);
    --color-card: var(--brand-card-light);
    --color-text-primary: var(--brand-text-primary-light);
    --color-text-secondary: var(--brand-text-secondary-light);
    --color-text-muted: #64748B;
    --color-border: var(--brand-border-light);
    --color-border-soft: rgba(148,163,184,0.3);
    --color-surface: #FFFFFF;
    --color-surface-soft: #F8FAFC;
    --color-surface-strong: #FFFFFF;
    --color-header-bg: #FFFFFF;
    --color-nav-bg: #FFFFFF;
    --color-overlay: rgba(15,23,42,0.22);
    --color-input-bg: #FFFFFF;
    --color-input-border: rgba(148,163,184,0.35);
    --color-input-placeholder: #94A3B8;
    --color-success: #16A34A;
    --color-success-soft: rgba(34,197,94,0.14);
    --color-danger: #DC2626;
    --color-danger-soft: rgba(220,38,38,0.14);
    --color-warning: #D97706;
    --color-warning-soft: rgba(217,119,6,0.14);
    --color-info: #2563EB;
    --color-info-soft: rgba(37,99,235,0.14);
    --glass-bg: #FFFFFF;
    --glass-border: rgba(148,163,184,0.28);
    --glass-shadow: 0 12px 28px rgba(15,23,42,0.08);
    --color-shadow-soft: 0 8px 24px rgba(15,23,42,0.08);
    --skeleton-start: rgba(148,163,184,0.15);
    --skeleton-mid: rgba(148,163,184,0.3);
    --skeleton-end: rgba(148,163,184,0.15);
    --color-select-option-bg: #FFFFFF;
}