/* ReserBee Super Admin - Base Styles */
/* CSS Variables, Reset, and Typography */

@font-face {
    font-family: 'Rubik';
    src: url('/fonts/Rubik-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rubik';
    src: url('/fonts/Rubik-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Core Brand Colors - New Brand Palette */
    --honey: #FFF947;
    --charcoal: #0b0b0b;
    --primary-light: #fffbdf;
    --soft-gray: #F7F7F7;
    --medium-gray: #E5E5E5;
    --success: #1cff8a;
    --background: #FFFFFF;
    --foreground: #0b0b0b;

    /* Semantic Colors */
    --primary: var(--honey);
    --primary-hover: #fff947;
    --success-green: var(--success);
    --danger-red: #EF4444;
    --info-blue: #3B82F6;

    /* Text Colors */
    --text-dark: var(--charcoal);
    --text-medium: #666666;
    --text-light: #999999;

    /* Border Colors */
    --border-light: var(--medium-gray);
    --border-medium: #D0D0D0;

    /* Background Colors */
    --bg-light: var(--primary-light);
    --bg-white: var(--background);

    /* Shadows */
    --shadow-sm: 0 1px 3px 0 rgba(11, 11, 11, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(11, 11, 11, 0.08), 0 2px 4px -1px rgba(11, 11, 11, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(11, 11, 11, 0.08), 0 4px 6px -2px rgba(11, 11, 11, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(11, 11, 11, 0.1), 0 10px 10px -5px rgba(11, 11, 11, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(11, 11, 11, 0.25);
    --shadow-honey: 0 4px 12px rgba(255, 249, 71, 0.3);

    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;

    /* Fonts - Using Rubik throughout */
    --font-serif: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-sans: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Accent Color for Native Form Elements */
    accent-color: var(--honey);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-light);
    color: var(--text-dark);
    font-family: var(--font-sans);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 300;
    color: var(--charcoal);
    line-height: 1.3;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

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

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }

.flex {
    display: flex;
}

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

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

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

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

.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}