/* DapTap brand overlay for social.daptap.co — v2
 * Hijacks the existing --theme-* CSS custom properties so the entire
 * AI Studio shell shifts to DapTap purple/pink without touching their components.
 */

/* ─── 1. Override the light-theme tokens ──────────────────────────── */
html[data-theme-resolved='light'],
html[data-theme='light'],
:root {
    --theme-accent: #7c3aed !important;
    --theme-accent-rgb: 124, 58, 237 !important;
    --theme-link-color: #7c3aed !important;
    --theme-link-hover-color: #6d28d9 !important;
    --theme-button-radius: 14px !important;
    --theme-card-radius: 16px !important;
    --theme-input-radius: 12px !important;
}

/* ─── 2. Override the dark-theme tokens ───────────────────────────── */
html[data-theme-resolved='dark'],
html[data-theme='dark'],
.dark {
    --theme-accent: #a855f7 !important;
    --theme-accent-rgb: 168, 85, 247 !important;
    --theme-link-color: #a855f7 !important;
    --theme-link-hover-color: #c084fc !important;
    --theme-button-radius: 14px !important;
    --theme-card-radius: 16px !important;
    --theme-input-radius: 12px !important;
}

/* ─── 3. DapTap brand vars — sit alongside theme vars for utilities ─ */
:root {
    --dt-primary: #7c3aed;
    --dt-primary-600: #6d28d9;
    --dt-pink: #ec4899;
    --dt-coral: #ff6b35;
    --dt-music-green: #1ed760;
    --dt-shadow-soft: 0 4px 12px rgba(124, 58, 237, 0.10);
    --dt-shadow-hover: 0 8px 24px rgba(124, 58, 237, 0.18);
}

/* ─── 4. Tailwind utility-class hijacks (where social uses Tailwind) ─ */

/* Violet/blue/indigo references → DapTap purple. Targets common Tailwind
 * utility classes likely used across the app. */
.bg-violet-500,
.bg-violet-600,
.bg-blue-500,
.bg-blue-600,
.bg-indigo-500,
.bg-indigo-600 {
    background-color: var(--dt-primary) !important;
}
.bg-violet-500\/10 { background-color: rgba(124, 58, 237, 0.10) !important; }
.bg-violet-500\/20 { background-color: rgba(124, 58, 237, 0.20) !important; }
.bg-violet-500\/30 { background-color: rgba(124, 58, 237, 0.30) !important; }
.bg-blue-500\/10 { background-color: rgba(124, 58, 237, 0.10) !important; }

.text-violet-500,
.text-violet-600,
.text-blue-500,
.text-blue-600,
.text-indigo-500,
.text-indigo-600 {
    color: var(--dt-primary) !important;
}

.border-violet-500,
.border-blue-500,
.border-indigo-500 {
    border-color: var(--dt-primary) !important;
}

.ring-violet-500,
.ring-blue-500,
.ring-indigo-500 {
    --tw-ring-color: var(--dt-primary) !important;
}

/* ─── 5. Primary buttons (any framework) ─────────────────────────── */
button[type='submit']:not([class*='secondary']):not([class*='ghost']):not([class*='outline']):not([class*='danger']):not([class*='destructive']),
.btn-primary,
.btn.btn-modern-primary,
[data-primary-button],
.guest-marketing-dashboard-button {
    background: linear-gradient(135deg, var(--dt-primary) 0%, var(--dt-primary-600) 100%) !important;
    color: #fff !important;
    border-color: var(--dt-primary-600) !important;
    box-shadow: var(--dt-shadow-soft) !important;
    transition: all .15s ease !important;
}
button[type='submit']:not([class*='secondary']):not([class*='ghost']):not([class*='outline']):hover,
.btn-primary:hover,
.btn.btn-modern-primary:hover,
.guest-marketing-dashboard-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--dt-shadow-hover) !important;
    filter: brightness(1.05);
}

/* ─── 6. guest-marketing-* component skinning ────────────────────── */
.guest-marketing-action-button {
    border-color: rgba(124, 58, 237, 0.35) !important;
}
.guest-marketing-locale-button:hover,
.guest-marketing-language-dropdown {
    border-color: var(--dt-primary) !important;
}

/* Marketing background gets a purple-leaning radial overlay */
.guest-marketing-shell {
    background: radial-gradient(circle at top, rgba(124,58,237,0.18), transparent 20%),
                radial-gradient(circle at 80% 30%, rgba(236,72,153,0.10), transparent 22%),
                linear-gradient(180deg, #04050d 0%, #070814 26%, #090b19 60%, #05060f 100%) !important;
}

/* ─── 7. Form controls — purple focus ring ──────────────────────── */
input:focus,
textarea:focus,
select:focus,
[contenteditable]:focus {
    outline: none !important;
    border-color: var(--dt-primary) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18) !important;
}

/* ─── 8. Form switches / checkboxes / radios → purple ───────────── */
input[type='checkbox']:checked,
input[type='radio']:checked,
.form-check-input:checked {
    background-color: var(--dt-primary) !important;
    border-color: var(--dt-primary) !important;
    accent-color: var(--dt-primary) !important;
}
input[type='checkbox'],
input[type='radio'],
input[type='range'] {
    accent-color: var(--dt-primary) !important;
}

/* ─── 9. Progress bars → purple→pink gradient ───────────────────── */
.progress-bar,
[role='progressbar'] > div,
progress::-webkit-progress-value,
progress::-moz-progress-bar {
    background: linear-gradient(90deg, var(--dt-primary) 0%, var(--dt-pink) 100%) !important;
}

/* ─── 10. Headings polish ────────────────────────────────────────── */
h1, h2, h3, .h1, .h2, .h3 {
    letter-spacing: -0.02em;
}

/* ─── 11. Brand utility classes (additive — use directly in markup) ─ */
.dt-text-primary    { color: var(--dt-primary) !important; }
.dt-bg-primary      { background: var(--dt-primary) !important; color: #fff !important; }
.dt-border-primary  { border-color: var(--dt-primary) !important; }
.dt-gradient-primary {
    background: linear-gradient(135deg, var(--dt-primary), var(--dt-pink)) !important;
    color: #fff !important;
}
.dt-gradient-music {
    background: linear-gradient(135deg, var(--dt-music-green), var(--dt-primary)) !important;
    color: #fff !important;
}
.dt-rounded         { border-radius: 14px !important; }
.dt-rounded-lg      { border-radius: 16px !important; }
.dt-shadow-soft     { box-shadow: var(--dt-shadow-soft) !important; }
.dt-shadow-hover    { box-shadow: var(--dt-shadow-hover) !important; }

/* ─── 12. Sidebar/nav active state — purple glow ─────────────────── */
[aria-current='page'],
nav a.active,
.sidebar a.active,
.sidebar-link.active,
[data-active='true'] {
    background: rgba(124, 58, 237, 0.12) !important;
    color: var(--dt-primary) !important;
}

/* ─── 13. Card-like elements → softer shadow + brand-leaning border ─ */
.card,
[class*='rounded-2xl'],
[class*='rounded-xl'] {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

/* ─── 14. Body link color (catch-all for prose links) ────────────── */
a:not([class*='bg-']):not([class*='btn-']):not([class*='nav-']) {
    color: var(--dt-primary);
}
a:not([class*='bg-']):not([class*='btn-']):not([class*='nav-']):hover {
    color: var(--dt-primary-600);
}