/**
 * GutsyBites Base Styles
 *
 * Global styles and CSS variables for GutsyBites components
 */

:root {
    /* Colors - Vitality (Light Mode) */
    --gb-color-primary: #22c55e;
    --gb-color-secondary: #6fe3aa;
    --gb-color-background: #f8f5ec;
    --gb-color-background-alt: #e8f3ff;
    --gb-color-text: #1f1f1f;
    --gb-color-text-light: #64748b;

    /* Typography */
    --gb-font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
    --gb-font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --gb-font-mono: ui-monospace, monospace;

    /* Font Sizes */
    --gb-text-xs: 0.75rem;
    --gb-text-sm: 0.875rem;
    --gb-text-base: 1rem;
    --gb-text-lg: 1.125rem;
    --gb-text-xl: 1.25rem;
    --gb-text-2xl: 1.5rem;
    --gb-text-3xl: 1.875rem;
    --gb-text-4xl: 2.25rem;
    --gb-text-5xl: 3rem;

    /* Spacing */
    --gb-space-1: 0.25rem;
    --gb-space-2: 0.5rem;
    --gb-space-3: 0.75rem;
    --gb-space-4: 1rem;
    --gb-space-6: 1.5rem;
    --gb-space-8: 2rem;
    --gb-space-12: 3rem;
    --gb-space-16: 4rem;

    /* Border Radius */
    --gb-radius-sm: 0.25rem;
    --gb-radius-md: 0.5rem;
    --gb-radius-lg: 1rem;
    --gb-radius-full: 9999px;

    /* Shadows */
    --gb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --gb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --gb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* Glass Effect */
    --gb-glass-bg: rgba(255, 255, 255, 0.7);
    --gb-glass-border: rgba(255, 255, 255, 0.3);
    --gb-glass-blur: 12px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --gb-color-primary: #6fe3aa;
        --gb-color-secondary: #a7f3d0;
        --gb-color-background: #0b1220;
        --gb-color-background-alt: #111827;
        --gb-color-text: #d6f3ff;
        --gb-color-text-light: #94a3b8;
        --gb-glass-bg: rgba(17, 24, 39, 0.7);
        --gb-glass-border: rgba(255, 255, 255, 0.1);
    }
}

/* Glass Morphism Effect */
.gutsybites-glass {
    background: var(--gb-glass-bg);
    backdrop-filter: blur(var(--gb-glass-blur));
    -webkit-backdrop-filter: blur(var(--gb-glass-blur));
    border: 1px solid var(--gb-glass-border);
}

/* GutsyBites Container */
.gutsybites-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gb-space-4);
    padding-right: var(--gb-space-4);
}

/* GutsyBites Block Wrapper */
.gutsybites-block {
    margin-bottom: var(--gb-space-8);
}

/* GutsyBites Block Preview (in editor) */
.gutsybites-block-preview {
    padding: var(--gb-space-8);
    border: 2px dashed var(--gb-color-text-light);
    border-radius: var(--gb-radius-lg);
    text-align: center;
    background: var(--gb-color-background-alt);
    color: var(--gb-color-text);
    font-family: var(--gb-font-body);
}

.gutsybites-block-preview p {
    margin: var(--gb-space-2) 0;
}

.gutsybites-block-preview small {
    font-size: var(--gb-text-sm);
    color: var(--gb-color-text-light);
}

/* Responsive Typography */
@media (max-width: 768px) {
    :root {
        --gb-text-4xl: 1.875rem;
        --gb-text-5xl: 2.25rem;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus Styles */
.gutsybites-block:focus-visible {
    outline: 2px solid var(--gb-color-primary);
    outline-offset: 2px;
}

/* Loading State */
.gutsybites-loading {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid var(--gb-color-text-light);
    border-top-color: var(--gb-color-primary);
    border-radius: 50%;
    animation: gutsybites-spin 0.6s linear infinite;
}

@keyframes gutsybites-spin {
    to { transform: rotate(360deg); }
}