/* ============================================================
   GROWTH BUDGET — Design System v5.0
   tokens.css: Google Fonts import, CSS custom properties, dark theme, base reset
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
    /* Brand */
    --navy:          #1a2744;
    --navy-deep:     #0f1d36;
    --navy-mid:      #1e2f50;
    --teal:          #0d9488;
    --teal-mid:      #14b8a6;
    --teal-light:    #2dd4bf;
    --teal-pale:     #ccfbf1;
    --teal-subtle:   rgba(13, 148, 136, 0.08);
    --slate:         #64748b;
    --gold:          #f59e0b;
    --gold-light:    #fbbf24;
    --danger:        #ef4444;
    --danger-pale:   #fef2f2;
    --success:       #10b981;

    /* Sidebar — always dark, theme-independent */
    --sb-bg:           #0f1d36;
    --sb-border:       rgba(255, 255, 255, 0.07);
    --sb-text:         rgba(255, 255, 255, 0.55);
    --sb-text-active:  #ffffff;
    --sb-icon:         rgba(255, 255, 255, 0.36);
    --sb-hover-bg:     rgba(255, 255, 255, 0.05);
    --sb-active-bg:    rgba(45, 212, 191, 0.13);
    --sb-active-text:  #2dd4bf;
    --sb-w:            256px;
    --sb-collapsed-w:  64px;

    /* Light theme surfaces */
    --bg:          #eef2f7;
    --bg-alt:      #f6f9fc;
    --surface:     #ffffff;
    --surface-2:   #f8fafc;
    --surface-3:   #f1f5f9;
    --border:      #e2e8f0;
    --border-mid:  #cbd5e1;

    /* Text */
    --text-1:  #0f172a;
    --text-2:  #475569;
    --text-3:  #94a3b8;

    /* Layout */
    --topbar-h:      56px;
    --topbar-bg:     var(--surface);
    --panel-nav-w:   420px;

    /* Shadows */
    --shadow-xs: 0 1px 3px  rgba(0,0,0,0.06);
    --shadow-sm: 0 2px 8px  rgba(15,23,42,0.07);
    --shadow-md: 0 4px 20px rgba(15,23,42,0.09);
    --shadow-lg: 0 12px 40px rgba(15,23,42,0.13);
    --shadow-xl: 0 24px 64px rgba(15,23,42,0.18);

    /* Typography */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body:    'DM Sans', system-ui, sans-serif;

    /* Radius */
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   14px;
    --r-xl:   18px;
    --r-2xl:  24px;
    --r-full: 9999px;

    /* Motion */
    --ease:    0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-md: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dark Theme ─────────────────────────────────────────────── */
[data-theme="dark"] {
    --bg:         #080e1c;
    --bg-alt:     #0b1220;
    --surface:    #101c34;
    --surface-2:  #152038;
    --surface-3:  #1a2744;
    --border:     #1e3358;
    --border-mid: #2a4070;
    --topbar-bg:  #101c34;
    --teal-subtle: rgba(13, 148, 136, 0.12);

    --text-1: #e2e8f4;
    --text-2: #94a3b8;
    --text-3: #4e6180;

    --shadow-sm: 0 2px 8px  rgba(0,0,0,0.35);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.60);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.70);
}

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text-1);
    line-height: 1.6;
    transition: background var(--ease), color var(--ease);
}

a       { color: inherit; text-decoration: none; }
img, svg { display: block; }
button  { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol  { list-style: none; }
input, select, textarea { font-family: inherit; }