/* ==========================================================
   Kashoo V2 - Theme tokens & base styles (Mint + Lavender)
   ========================================================== */

:root {
    /* Brand */
    --mint:        #3dd9b0;
    --mint-dark:   #21b591;
    --mint-soft:   #d8f7ee;
    --lavender:    #b8a9f0;
    --lavender-dark:#8a76d9;
    --lavender-soft:#ece7fb;

    --gradient: linear-gradient(135deg, #3dd9b0 0%, #b8a9f0 100%);
    --gradient-soft: linear-gradient(135deg, #d8f7ee 0%, #ece7fb 100%);

    /* Surfaces */
    --bg:          #f1faf7;
    --surface:     #ffffff;
    --surface-2:   #f7f7fd;

    /* Text */
    --text:        #2b2d42;
    --text-muted:  #6b7280;
    --text-faint:  #9aa1ad;

    /* States */
    --success: #21b591;
    --error:   #ef6f6f;
    --warning: #f0b429;
    --info:    #8a76d9;

    /* Lines & shadows */
    --border:     #e7ecf0;
    --shadow-sm:  0 2px 8px rgba(43, 45, 66, .06);
    --shadow:     0 8px 24px rgba(61, 217, 176, .12);
    --shadow-lg:  0 16px 40px rgba(138, 118, 217, .18);

    /* Radius */
    --radius-sm: 10px;
    --radius:    16px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* Spacing scale */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

    /* Layout */
    --header-h: 70px;
    --sidebar-w: 280px;
    --container: 1180px;
}

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

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
    max-width: 100%;
}

h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; color: var(--text); }
h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }

a { color: var(--mint-dark); text-decoration: none; transition: color .2s; }
a:hover { color: var(--lavender-dark); }

img, svg { max-width: 100%; }

.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    user-select: none;
}

/* Utility */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-mint { color: var(--mint-dark); }
.text-lav  { color: var(--lavender-dark); }
.gradient-text {
    background: var(--gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}
.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}
.hidden { display: none !important; }
.full { width: 100%; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--lavender); border-radius: 999px; }
::-webkit-scrollbar-track { background: var(--surface-2); }