/**
 * Global Theme Styles for Sonic Bloom
 *
 * This file applies CSS variables globally to ensure theme customizations
 * work consistently across all pages and sections.
 *
 * Applied to: All public website pages
 * Dependencies: css-variables.blade.php must be loaded first
 */

/* ==========================================================================
   TYPOGRAPHY - Global font application
   ========================================================================== */

body {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base) !important;
    color: var(--text-color);
    letter-spacing: var(--body-letter-spacing);
    background-color: var(--page-background);
}

p {
    letter-spacing: var(--body-letter-spacing);
}

/* Override Tailwind text-* utilities to scale with base font size */
.text-xs { font-size: calc(var(--font-size-base) * 0.75) !important; }
.text-sm { font-size: calc(var(--font-size-base) * 0.875) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: calc(var(--font-size-base) * 1.125) !important; }
.text-xl { font-size: calc(var(--font-size-base) * 1.25) !important; }
.text-2xl { font-size: calc(var(--font-size-base) * 1.5) !important; }
.text-3xl { font-size: calc(var(--font-size-base) * 1.875) !important; }
.text-4xl { font-size: calc(var(--font-size-base) * 2.25) !important; }
.text-5xl { font-size: calc(var(--font-size-base) * 3) !important; }
.text-6xl { font-size: calc(var(--font-size-base) * 3.75) !important; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    color: var(--heading-color);
    letter-spacing: var(--heading-letter-spacing);
    text-transform: var(--heading-text-transform);
}

/* Heading sizes from theme customizer */
h1 { font-size: var(--heading-size-h1) !important; }
h2 { font-size: var(--heading-size-h2) !important; }
h3 { font-size: var(--heading-size-h3) !important; }
h4 { font-size: var(--heading-size-h4) !important; }

/* ==========================================================================
   SECTIONS - Apply vertical spacing from theme customizer
   ========================================================================== */

section {
    padding-top: var(--section-vertical-spacing) !important;
    padding-bottom: var(--section-vertical-spacing) !important;
}

/* ==========================================================================
   LINKS - Hover states (navigation, logo, etc - NOT buttons)
   ========================================================================== */

/* Remove default link color styling - let navigation/sections control their own colors
   This prevents button color from bleeding into nav/logo */

/* Footer links use link-hover color */
.footer-link:hover {
    color: var(--link-hover) !important;
    opacity: 1 !important;
}

/* ==========================================================================
   BUTTONS - Rounded corners and hover states
   ========================================================================== */

button,
.btn,
a.button,
a.contact-button {
    border-radius: var(--button-border-radius) !important;
    transition: all 0.3s ease;
}

/* Auto-darken buttons on hover using filter (like Newsletter section) */
button:hover:not(:disabled),
.btn:hover:not(:disabled),
a.button:hover,
a.contact-button:hover {
    filter: brightness(0.9);
}

/* ==========================================================================
   FORM INPUTS - Border radius
   ========================================================================== */

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    border-radius: var(--input-border-radius) !important;
}

/* ==========================================================================
   CARDS - Border radius and shadows
   ========================================================================== */

.card,
.show-card,
.track-card,
#amplitude-player {
    border-radius: var(--card-border-radius) !important;
    box-shadow: var(--box-shadow) !important;
}

/* ==========================================================================
   BORDERS - Apply theme border color
   ========================================================================== */

.card,
.bordered,
.border {
    border-color: var(--border-color);
}

/* Default border for cards that don't have explicit border */
.card:not([style*="border"]) {
    border: 1px solid var(--border-color);
}

/* ==========================================================================
   BUTTON STYLES - Fill vs Outline (requires data attribute)
   ========================================================================== */

/* Fill style (default) */
.btn-fill,
button[data-button-style="fill"],
.button[data-button-style="fill"] {
    background-color: var(--button-color);
    color: var(--button-text);
    border: 2px solid var(--button-color);
}

/* Outline style */
.btn-outline,
button[data-button-style="outline"],
.button[data-button-style="outline"] {
    background-color: transparent;
    color: var(--button-color);
    border: 2px solid var(--button-color);
}

.btn-outline:hover,
button[data-button-style="outline"]:hover,
.button[data-button-style="outline"]:hover {
    background-color: var(--button-color);
    color: var(--button-text);
    filter: none; /* Override the brightness filter for outline->fill transition */
}

/* ==========================================================================
   HOVER EFFECTS - Fade, Lift, Scale (requires data attribute)
   ========================================================================== */

/* Base transition for all hover effects */
button, .btn, a.button {
    transition: all 0.3s ease;
}

/* Fade effect */
[data-hover-effect="fade"]:hover {
    opacity: 0.85;
}

/* Lift effect */
[data-hover-effect="lift"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Scale effect */
[data-hover-effect="scale"]:hover {
    transform: scale(1.05);
}

/* ==========================================================================
   RESPONSIVE - Ensure styles work across breakpoints
   ========================================================================== */

@media (max-width: 767px) {
    /* Mobile adjustments if needed */
}

@media (min-width: 768px) {
    /* Tablet and desktop adjustments if needed */
}