/*
 * SaaS Wedding Builder - Premium Design System
 * 100% Vanilla CSS
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

:root {
    /* Color Palette - Elegant Dark Theme */
    --color-bg-base: #0f1115;
    --color-bg-surface: #1a1d24;
    --color-bg-elevated: #242831;
    --color-text-main: #f3f4f6;
    --color-text-muted: #9ca3af;
    --color-accent-primary: #d4af37;
    /* Champagne Gold */
    --color-accent-hover: #f1c40f;
    --color-border: #374151;
    --color-danger: #ef4444;
    --color-success: #10b981;

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Outfit', sans-serif;
    --font-serif: 'Playfair Display', serif;
    /* Good for wedding templates */

    /* Layout & Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-12: 3rem;

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;

    /* Shadows & Effects */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-accent: 0 0 15px rgba(212, 175, 55, 0.3);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Reset & Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--font-sans);
    line-height: 1.5;
    background-color: var(--color-bg-base);
    color: var(--color-text-main);
    -webkit-font-smoothing: antialiased;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Typography Utilities */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-4);
}

a {
    color: var(--color-accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-hover);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2) var(--spacing-4);
    font-family: var(--font-sans);
    font-weight: 500;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.875rem;
}

.btn-primary {
    background-color: var(--color-accent-primary);
    color: var(--color-bg-base);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background-color: #ffffff;
    color: #000000 !important;
    box-shadow: var(--shadow-accent);
    transform: translateY(-1px);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
}

.btn-outline:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

/* Forms */
.form-group {
    margin-bottom: var(--spacing-4);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.form-control {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-main);
    font-family: var(--font-sans);
    transition: border-color var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 1px var(--color-accent-primary);
}

/* Layout Utilities */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.gap-2 {
    gap: var(--spacing-2);
}

.gap-4 {
    gap: var(--spacing-4);
}

.gap-8 {
    gap: var(--spacing-8);
}

/* Glassmorphism Panel */
.glass-panel {
    background: rgba(59, 65, 78, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
}

/* Micro-animations */
.fade-in {
    animation: fadeIn var(--transition-normal) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom utility overrides for dark theme compatibility */
.text-muted {
    color: var(--color-text-muted) !important;
}

/* Light Theme support class */
body.light-theme {
    --color-bg-base: #ffffff;
    --color-bg-surface: #f9fafb;
    --color-bg-elevated: #f3f4f6;
    --color-text-main: #1f2937;
    --color-text-muted: #4b5563;
    --color-border: #e5e7eb;
    background-color: var(--color-bg-base) !important;
    color: var(--color-text-main) !important;
}

body.light-theme .glass-panel {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

/* Fix primary button contrast under light theme */
body.light-theme .btn-primary,
body.production-web .btn-primary {
    color: #0f1115 !important;
}

body.light-theme .btn-primary:hover,
body.production-web .btn-primary:hover {
    background-color: #0f1115;
    color: #ffffff !important;
    box-shadow: var(--shadow-sm);
}

body.light-theme .btn-outline {
    border-color: var(--color-border);
    color: var(--color-text-main);
}

body.light-theme .btn-outline:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

/* Golden premium button styling */
:root {
    --gold-dark: #c18d45;
    --gold-light: #ffedaa;
    --metal-dark: #a3723a;
    --metal-light: #f5d19a;
    --border-radius: 9999px;
    /* Pro pilulkovitý tvar */
}

/* Hlavní tělo tlačítka (vnitřní panel) */
.golden-button {
    display: inline-block;
    padding: 18px 45px;
    /* Upravte podle potřeby, abyste definovali velikost */
    position: relative;
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%);
    border-radius: var(--border-radius);

    /* Nastavení čitelného textu namísto transparentního */
    color: #2a1b08;
    text-decoration: none;
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-shadow: 0 1px 0px rgba(255, 255, 255, 0.4);
    /* Jemný světlý stín pod textem */

    border: none;
    cursor: pointer;
    z-index: 1;
    /* Zabezpečit, aby vnitřek byl nahoře */
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);

    /* Vnitřní stíny pro hloubku */
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.25),
        /* Vnitřní stín pod rámečkem */
        inset 0 -2px 3px rgba(255, 255, 255, 0.4);
    /* Jemný vnitřní stín na dně */
}

.golden-button:hover {
    color: #2a1b08;
    text-decoration: none;
}

/* Kovový vnější rámeček - tvořený pseudoprvkem pod tlačítkem */
.golden-button::before {
    content: '';
    position: absolute;
    top: -5px;
    /* Tloušťka rámečku */
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(135deg, var(--metal-light) 0%, var(--metal-dark) 100%);
    /* Kovový lesk */
    border-radius: var(--border-radius);
    z-index: -1;
    /* Pod hlavním tělem */
    transition: background var(--transition-fast);

    /* Vnější stín pod celým tlačítkem pro hloubku */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Vnitřní detailní odlesk a stín na kovovém rámečku */
.golden-button::after {
    content: '';
    position: absolute;
    top: -3px;
    /* Umístěn v tloušťce rámečku */
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
    /* Světelný odlesk a stín na okraji */
    border-radius: var(--border-radius);
    z-index: -1;
    /* Pod hlavním tělem, nad `::before` */
    opacity: 0.7;
    /* Jemnější efekt */
}

/* Přidat Interaktivitu - Hover */
.golden-button:hover::before {
    background: linear-gradient(135deg, #fff0c7 0%, #c4965e 100%);
    /* Trochu jasnější na hover */
}

/* Přidat Interaktivitu - Active */
.golden-button:active {
    transform: translateY(2px);
    /* Mírný pohyb dolů pro efekt stisknutí */
    color: #2a1b08;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3),
        inset 0 -1px 1px rgba(255, 255, 255, 0.3);
    /* Snížený vnitřní stín */
}

.golden-button:active::before {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* Snížený vnější stín */
}