/* =========================================================
   YOM-B-YOM GLOBAL STYLE SHEET
   - Unified Brown Color Palette (Swatches: Pale Sand, Sand, Hazelnut,
     Sable, Chamois, Maple, Camel, Café Au Lait, Taupe, Amber Brown,
     Copper, Mocha, Mahogany, Cocoa, Umber)
   - Typography: Space Grotesk
   - Enhanced Light & Dark Mode
   - Global Resets & Base Styles
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ================= 1. GLOBAL DESIGN TOKENS ================= */
:root {
    /* Reference Brown Swatches */
    --swatch-pale-sand: #FFECC6;
    --swatch-sand: #EDCDAF;
    --swatch-hazelnut: #CFB595;
    --swatch-sable: #E0CDA9;
    --swatch-chamois: #F7AE62;

    --swatch-maple: #BB9351;
    --swatch-camel: #C19A6B;
    --swatch-cafe-au-lait: #A9846A;
    --swatch-taupe: #B98663;
    --swatch-amber-brown: #A6674C;

    --swatch-copper: #B87333;
    --swatch-mocha: #654321;
    --swatch-mahogany: #420D09;
    --swatch-cocoa: #412920;
    --swatch-umber: #3D2D13;

    /* Brand / Semantic Variables - LIGHT MODE */
    --primary: #5C3A1D;         /* Deep Warm Mocha */
    --primary-hover: #420D09;   /* Mahogany */
    --primary-dark: #2B1809;    /* Umber */
    --secondary: #9B765B;       /* Café Au Lait */
    --accent: #B87333;          /* Copper */
    --accent-warm: #E2994B;     /* Chamois */
    
    /* Backgrounds - Light (Warm Latte/Sand with Unified Warm Mocha Navbar) */
    --bg-main: #DEC8B0;
    --bg-subtle: #D2BA9F;       /* Richer Sand */
    --bg-card: #EAD8C4;
    --bg-card-alt: #E0CEB9;
    --bg-hero: #D6BEA5;
    --bg-navbar: rgba(43, 28, 18, 0.97); /* Rich Warm Mocha Navbar */
    --bg-navbar-solid: #2B1C12;
    --bg-footer: #DEC8B0;       /* Light Warm Sand Footer matching Home */
    --bg-sidebar: #2B1C12;      /* Rich Warm Mocha Sidebar */
    --bg-input: #EAD8C4;
    
    /* Typography & High-Contrast Text */
    --font-main: "Space Grotesk", sans-serif;
    --font-body: "Space Grotesk", sans-serif;
    --font-title: "Space Grotesk", sans-serif;
    
    --text-primary: #2B1809;    /* Deep Umber - crisp high contrast on light bg */
    --text-secondary: #482B14;  /* Rich Mocha */
    --text-muted: #6B4628;      /* Café Au Lait */
    --text-light: #FFECC6;      /* Pale Sand */
    --text-white: #FFFFFF;
    
    /* Borders & Shadows */
    --border-color: rgba(43, 24, 9, 0.22);
    --border-light: rgba(43, 24, 9, 0.12);
    --border-focus: #B87333;
    
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;
    
    --shadow-sm: 0 2px 8px rgba(43, 24, 9, 0.08);
    --shadow-md: 0 8px 24px rgba(43, 24, 9, 0.14);
    --shadow-lg: 0 16px 40px rgba(43, 24, 9, 0.2);
    
    --transition-fast: 0.2s ease;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ================= 2. DARK MODE TOKENS (Warm, Softened Dark Mocha) ================= */
body.dark-mode {
    --primary: #EDCDAF;         /* Sand */
    --primary-hover: #FFECC6;   /* Pale Sand */
    --primary-dark: #CFB595;
    --secondary: #C19A6B;       /* Camel */
    --accent: #F7AE62;          /* Chamois */
    --accent-warm: #B87333;
    
    /* Backgrounds - Softened Warm Dark Mocha (Fat'ah seka) */
    --bg-main: #23180F;         /* Warm Dark Cocoa */
    --bg-subtle: #2C1F15;       /* Subtle Warm Dark */
    --bg-card: #332419;         /* Warm Card */
    --bg-card-alt: #3D2B1E;     /* Card Alternate */
    --bg-hero: #291C12;
    --bg-navbar: rgba(43, 28, 18, 0.97); /* Rich Warm Mocha Navbar */
    --bg-navbar-solid: #2B1C12;
    --bg-footer: #1A110A;
    --bg-sidebar: #2B1C12;
    --bg-input: #332419;
    
    /* Text - High Contrast Light Browns on Dark bg */
    --text-primary: #FFECC6;    /* Pale Sand */
    --text-secondary: #EDCDAF;  /* Sand */
    --text-muted: #D1B89A;      /* Hazelnut */
    --text-light: #2B1809;
    --text-white: #FFFFFF;
    
    --border-color: rgba(255, 236, 198, 0.15);
    --border-light: rgba(255, 236, 198, 0.08);
    --border-focus: #F7AE62;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.48);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* ================= 3. GLOBAL RESET & BASE ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.6;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    color: var(--text-primary);
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Links */
a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

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

/* Lists */
ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Buttons */
button {
    font-family: var(--font-body);
    border: none;
    outline: none;
    cursor: pointer;
    background: transparent;
    transition: var(--transition);
}

/* Inputs & Form Elements */
input, textarea, select {
    font-family: var(--font-body);
    background-color: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    outline: none;
    transition: var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.2);
}

/* Layout Utilities */
.container {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* ================= 4. DASHBOARD & SIDEBAR LAYOUT ================= */
.dashboard-layout,
.dashboard {
    display: flex;
    min-height: 100vh;
    width: 100%;
    position: relative;
    background-color: var(--bg-main);
}

.dashboard-layout .main-content,
.dashboard .main-content,
.dashboard-layout > main,
.dashboard > main {
    flex: 1;
    min-width: 0;
    margin-left: 250px;
    width: calc(100% - 250px);
    box-sizing: border-box;
    padding: 24px 30px 40px;
}

@media (max-width: 900px) {
    .dashboard-layout,
    .dashboard {
        flex-direction: column;
    }
    .dashboard-layout .main-content,
    .dashboard .main-content,
    .dashboard-layout > main,
    .dashboard > main {
        margin-left: 0;
        width: 100%;
        padding: 16px 18px 30px;
    }
}