@import "components/booking.css";
@import "components/settings.css";
@import "components/auth.css";
@import "components/dashboard.css";
@import "components/admin-bookings.css";
@import "components/buttons.css";
@import "components/alerts.css";
@import "components/landing.css";

/**
 * Title: Application Styles (Global)
 * 
 * Purpose:
 * - Define global theme styles and landing page components.
 * 
 * Why / Why this design:
 * - Centralizes foundational design rules and root theme variables for the application.
 * - Keeps high-level structural styling separate from fine-grained utilities.
 * 
 * Teaching notes:
 * - Keep this file restricted to root styles and major page wrappers.
 * - For common layouts, prefer extracting atomic classes to components/utilities.css.
 */
html, body {
    margin: 0;
    padding: 0;
    font-family: "Josefin Sans", sans-serif;
    color: var(--neutral-700); 
    height: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--brand-primary-hover);
}

:root {
    --brand-primary: #795757;
    --brand-primary-rgb: 121, 87, 87;
    --brand-primary-hover: #5a3d3d;
    --brand-cream: #ede8e6;
    --brand-cream-hover: #dacccb;
    --brand-grey: #dacccb;
    --brand-grey-dark: #8c7b79;
    --brand-dark: #262626;
    --brand-danger: #e74c3c;
    --brand-danger-dark: #c0392b;
    --brand-danger-dark-hover: #962d22;
    --brand-danger-bg: #f8d7da;
    --brand-danger-text: #842029;
    --brand-success: #27ae60;
    --brand-success-bg: #d1e7dd;
    --brand-success-text: #0f5132;
    --brand-warning: #f39c12;
    --brand-warning-bg: #fff3cd;
    --brand-warning-text: #664d03;
    --brand-accent: #bd6b54;
    --brand-highlight: #ecccc3;
    --neutral-100: #f8f9fa;
    --neutral-200: #e9ecef;
    --neutral-300: #dee2e6;
    --neutral-400: #ced4da;
    --neutral-500: #adb5bd;
    --neutral-600: #6c757d;
    --neutral-700: #495057;
    --neutral-800: #343a40;
    --neutral-900: #212529;
    --success-bg: #d4edda;
}

.magma-theme-root { 
    background: #f4f4f4; 
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

input, button, select, textarea { font-family: inherit; }

.form-label { display: block; margin-bottom: 0.5rem; }
.form-control { border: 1px solid var(--brand-grey); border-radius: 4px; padding: 0.5rem 0.75rem; }
.form-control:focus { outline: none; border-color: var(--brand-primary); }