/**
 * AnyConversation Font System
 * Multiple font options for personalization
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400&family=Roboto+Mono:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Comic+Neue:wght@400;700&family=Dancing+Script:wght@400;700&family=Pacifico&family=Caveat:wght@400;700&family=Sacramento&display=swap');

/* Font Family CSS Variables */
:root {
    --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-merriweather: 'Merriweather', 'Georgia', serif;
    --font-mono: 'Roboto Mono', 'Courier New', monospace;
    --font-playfair: 'Playfair Display', 'Georgia', serif;
    --font-comic: 'Comic Neue', 'Comic Sans MS', cursive;
    --font-source-serif: 'Source Serif Pro', 'Georgia', serif;
    --font-dancing: 'Dancing Script', cursive;
    --font-pacifico: 'Pacifico', cursive;
    --font-caveat: 'Caveat', cursive;
    --font-sacramento: 'Sacramento', cursive;
}

/* Font Classes */
html[data-font="inter"],
html.font-inter {
    --current-font: var(--font-inter);
}

html[data-font="merriweather"],
html.font-merriweather {
    --current-font: var(--font-merriweather);
}

html[data-font="mono"],
html.font-mono {
    --current-font: var(--font-mono);
}

html[data-font="playfair"],
html.font-playfair {
    --current-font: var(--font-playfair);
}

html[data-font="comic"],
html.font-comic {
    --current-font: var(--font-comic);
}

html[data-font="source-serif"],
html.font-source-serif {
    --current-font: var(--font-source-serif);
}

html[data-font="dancing"],
html.font-dancing {
    --current-font: var(--font-dancing);
}

html[data-font="pacifico"],
html.font-pacifico {
    --current-font: var(--font-pacifico);
}

html[data-font="caveat"],
html.font-caveat {
    --current-font: var(--font-caveat);
}

html[data-font="sacramento"],
html.font-sacramento {
    --current-font: var(--font-sacramento);
}

/* Apply font to body and all text elements */
body {
    font-family: var(--current-font, 'Source Serif Pro', serif) !important;
}

/* Apply to all major text elements */
h1, h2, h3, h4, h5, h6,
p, span, div, a, button,
input, textarea, select,
label, li, td, th {
    font-family: inherit;
}

/* Smooth font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Font picker dropdown styling */
.font-picker-option {
    cursor: pointer;
    transition: all 0.2s ease;
}

.font-picker-option:hover {
    transform: translateX(4px);
}

.font-picker-option.active {
    background: var(--bg-tertiary, #f1f5f9);
}

/* Mobile-specific font picker styling */
@media (max-width: 640px) {
    #font-picker-menu {
        min-width: 180px !important;
        padding: 0.25rem !important;
        font-size: 0.8rem;
    }

    .font-picker-option {
        padding: 0.5rem 0.75rem !important;
    }

    .font-picker-option .font-medium {
        font-size: 0.75rem !important;
    }

    .font-picker-option .text-xs {
        font-size: 0.65rem !important;
    }

    .font-picker-option .text-2xl {
        font-size: 1.25rem !important;
    }
}

/* Preview text in each font */
.font-preview-inter { font-family: var(--font-inter); }
.font-preview-merriweather { font-family: var(--font-merriweather); }
.font-preview-mono { font-family: var(--font-mono); }
.font-preview-playfair { font-family: var(--font-playfair); }
.font-preview-comic { font-family: var(--font-comic); }
.font-preview-source-serif { font-family: var(--font-source-serif); }
.font-preview-dancing { font-family: var(--font-dancing); }
.font-preview-pacifico { font-family: var(--font-pacifico); }
.font-preview-caveat { font-family: var(--font-caveat); }
.font-preview-sacramento { font-family: var(--font-sacramento); }