:root {
    /* Colors */
    --primary-color: #5F63F2;
    --secondary-color: #27272E;
    --accent-color: #10b981;
    --text-color: #333333;
    --heading-color: #000000;
    --link-color: #5F63F2;
    --link-hover-color: #4850c9;
    --border-color: #e5e7eb;
    --background-color: #ffffff;
    --footer-background: #1f2937;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #5F63F2, #8b5cf6);
    --gradient-secondary: linear-gradient(135deg, #10b981, #06b6d4);
    --gradient-accent: linear-gradient(135deg, #f59e0b, #ef4444);

    /* Typography */
    --body-font: 'Inter', sans-serif;
    --heading-font: 'Inter', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* Layout */
    --container-width: 1200px;

    /* Effects */
    --border-radius: 8px;
    --box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    --transition-speed: 0.3s;
}

/* Apply styles to frontend elements */
.btn-primary, .optech-default-btn { background: var(--gradient-primary) !important; }
body { color: var(--text-color); }
h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-family: var(--heading-font); }
a { color: var(--link-color); }
a:hover { color: var(--link-hover-color); }