/* ═══════════════════════════════════════
   BASE.CSS — loaded on EVERY page
   Contains: CSS variables, dark theme,
   reset, body, and element base styles.
   DO NOT add any component styles here.
═══════════════════════════════════════ */

/* ── CSS Custom Properties ── */
:root {
    /* Brand */
    --c-primary:       #ff5f1f;
    --c-primary-dark:  #e54a0f;
    --c-primary-light: #ff8c5f;
    --c-secondary:     #222222;
    --c-accent:        #ffd700;
    --c-orange:        #ff5f1f;
    --c-green:         #4A7C59;
    --c-white:         #ffffff;
    
    /* Surfaces — light */
    --c-bg:            #F8F6F0;
    --c-bg-card:       #ffffff;
    --c-text:          #222222;
    --c-text-muted:    #666666;
    --c-border:        #e0e0e0;
    --c-border-light:  #f0f0f0;
    --c-glass-bg:      rgba(255,255,255,0.55);
    --c-glass-border:  rgba(255,255,255,0.80);
    --c-shadow:        rgba(0,0,0,0.10);

    /* Shadows */
    --shadow-sm:  0 2px 8px  rgba(0,0,0,0.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.16);

    /* Radius */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* Misc */
    --header-h: 88px;
    --mobile-nav-height: 78px;
    --font:     'Barlow', sans-serif;
    --tr:       all 0.3s ease;
    
    --drawer-bg:          rgba(255, 252, 248, 0.92);
    --drawer-border:      rgba(0, 0, 0, 0.08);
    --drawer-link-color:  rgba(30, 20, 10, 0.75);
    --drawer-theme-label:  rgba(30, 20, 10, 0.75);
    --drawer-link-active: rgba(232, 101, 26, 0.10);
    --drawer-sep:         rgba(0, 0, 0, 0.08);
    --drawer-label:       rgba(0, 0, 0, 0.30);
    --drawer-icon-color:  rgba(0, 0, 0, 0.45);
    --drawer-lang-muted:  rgba(0, 0, 0, 0.40);
    --drawer-lang-sep:    rgba(0, 0, 0, 0.20);
    --drawer-pill-bg:     rgba(0, 0, 0, 0.06);
    --drawer-pill-border: rgba(0, 0, 0, 0.10);
    --drawer-pill-color:  rgba(30, 20, 10, 0.70);

    --c-bg-secondary:  #f0ede6;
    --c-text-faint:    #999999;

    --primary:        var(--c-primary);
    --primary-dark:   var(--c-primary-dark);
    --primary-light:  var(--c-primary-light);
    --bg-card:        var(--c-bg-card);
    --bg-secondary:   var(--c-bg-secondary);
    --border-color:   var(--c-border);
    --border-light:   var(--c-border-light);
    --text-secondary: var(--c-text-muted);
    --text-tertiary:  var(--c-text-faint);
}

/* ── Dark theme ── */
[data-theme="dark"],
[data-theme="dark"] .app,
.dark-mode {
    --c-bg:           #121212;
    --c-bg-card:      #1e1e1e;
    --c-text:         #ffffff;
    --c-text-muted:   #b0b0b0;
    --c-border:       #333333;
    --c-border-light: #2a2a2a;
    --c-glass-bg:     rgba(30,30,30,0.72);
    --c-glass-border: rgba(255,255,255,0.10);
    --c-shadow:       rgba(0,0,0,0.45);
    --shadow-sm:      0 2px 8px  rgba(0,0,0,0.30);
    --shadow-md:      0 4px 16px rgba(0,0,0,0.40);
    --shadow-lg:      0 8px 32px rgba(0,0,0,0.50);
    
    --drawer-bg:          rgba(18, 12, 8, 0.82);
    --drawer-border:      rgba(255, 255, 255, 0.08);
    --drawer-link-color:  rgba(255, 255, 255, 0.75);
    --drawer-theme-label: rgba(255, 255, 255, 0.75);
    --drawer-link-active: rgba(232, 101, 26, 0.14);
    --drawer-sep:         rgba(255, 255, 255, 0.07);
    --drawer-label:       rgba(255, 255, 255, 0.30);
    --drawer-icon-color:  rgba(255, 255, 255, 0.45);
    --drawer-lang-muted:  rgba(255, 255, 255, 0.45);
    --drawer-lang-sep:    rgba(255, 255, 255, 0.25);
    --drawer-pill-bg:     rgba(255, 255, 255, 0.06);
    --drawer-pill-border: rgba(255, 255, 255, 0.10);
    --drawer-pill-color:  rgba(255, 255, 255, 0.70);
    
    /* nav bottom*/
    --text-tertiary: #808080;
    --border-light: #2a2a2a;
    --text-secondary: #b0b0b0;
    --bg-card: #1e1e1e;
    
    /*auth*/
    --border-color: #333333;
    
    --c-bg-secondary: #1a1a1a;
    --c-text-faint:   #808080;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: var(--c-bg);
    color: var(--c-text);
    transition: background 0.4s ease, color 0.4s ease;
    overflow-x: hidden;
    min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; object-fit: cover; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }