/* ───────────────────────────────────────────
   Color-theme overrides (loaded last to win)
   data-color="emerald" | data-color="sapphire"
   Each has dark + light mode variants.
   ─────────────────────────────────────────── */

/* ───── Emerald (Green) ───── */

[data-color="emerald"][data-mode="dark"],
[data-color="emerald"]:not([data-mode]) {
    --color-accent: #4ec67a;
    --color-accent-2: #6bc9d4;
    --hero-glow: rgba(78, 198, 122, 0.2);
    --hero-orb: rgba(78, 198, 122, 0.42);
    --button-primary: #4ec67a;
    --button-secondary: #6bc9d4;
    --card-glow: rgba(78, 198, 122, 0.22);
    --card-border: rgba(78, 198, 122, 0.36);
    --card-pattern:
        linear-gradient(120deg, rgba(78, 198, 122, 0.16), transparent 34%),
        radial-gradient(circle at 80% 12%, rgba(107, 201, 212, 0.12), transparent 24rem);
    --cta-bg:
        linear-gradient(135deg, rgba(78, 198, 122, 0.22), rgba(255, 255, 255, 0.045));
}

[data-color="emerald"][data-mode="light"] {
    --color-accent: #2d8a4e;
    --color-accent-2: #4a9aa8;
    --hero-glow: rgba(45, 138, 78, 0.14);
    --hero-orb: rgba(45, 138, 78, 0.28);
    --button-primary: #2d8a4e;
    --button-secondary: #4a9aa8;
    --card-glow: rgba(45, 138, 78, 0.14);
    --card-border: rgba(45, 138, 78, 0.26);
    --card-pattern:
        radial-gradient(circle at 18% 18%, rgba(45, 138, 78, 0.1), transparent 24rem),
        radial-gradient(circle at 80% 12%, rgba(74, 154, 168, 0.08), transparent 24rem);
    --cta-bg:
        linear-gradient(135deg, rgba(45, 138, 78, 0.18), rgba(255, 255, 255, 0.42));
}

/* ───── Sapphire (Blue) ───── */

[data-color="sapphire"][data-mode="dark"],
[data-color="sapphire"]:not([data-mode]) {
    --color-accent: #5b9cf5;
    --color-accent-2: #a78bfa;
    --hero-glow: rgba(91, 156, 245, 0.2);
    --hero-orb: rgba(91, 156, 245, 0.42);
    --button-primary: #5b9cf5;
    --button-secondary: #a78bfa;
    --card-glow: rgba(91, 156, 245, 0.22);
    --card-border: rgba(91, 156, 245, 0.36);
    --card-pattern:
        linear-gradient(120deg, rgba(91, 156, 245, 0.16), transparent 34%),
        radial-gradient(circle at 80% 12%, rgba(167, 139, 250, 0.12), transparent 24rem);
    --cta-bg:
        linear-gradient(135deg, rgba(91, 156, 245, 0.22), rgba(255, 255, 255, 0.045));
}

[data-color="sapphire"][data-mode="light"] {
    --color-accent: #3a72c9;
    --color-accent-2: #7c5cbf;
    --hero-glow: rgba(58, 114, 201, 0.14);
    --hero-orb: rgba(58, 114, 201, 0.28);
    --button-primary: #3a72c9;
    --button-secondary: #7c5cbf;
    --card-glow: rgba(58, 114, 201, 0.14);
    --card-border: rgba(58, 114, 201, 0.26);
    --card-pattern:
        radial-gradient(circle at 18% 18%, rgba(58, 114, 201, 0.1), transparent 24rem),
        radial-gradient(circle at 80% 12%, rgba(124, 92, 191, 0.08), transparent 24rem);
    --cta-bg:
        linear-gradient(135deg, rgba(58, 114, 201, 0.18), rgba(255, 255, 255, 0.42));
}

/* ───── Toggle swatch colors (non-variable overrides) ───── */

[data-color="emerald"] .color-toggle-dot {
    background: #4ec67a;
}

[data-color="sapphire"] .color-toggle-dot {
    background: #5b9cf5;
}