/* ══════════════════════════════════════════
   Adviso — design tokens, base typography, theme toggle
   ══════════════════════════════════════════ */

:root {
    /* GrowThere palette */
    --teal: #1a6b6a;
    --teal-dark: #145655;
    --teal-deeper: #0f4544;
    --teal-light: #e6f2f1;
    --gold: #c8a44e;
    --gold-light: #f8f2e2;
    --gold-dark: #a88a3a;
    --gold-muted: #d4b76a;
    --cream: #f7f3ec;
    --cream-dark: #ede6d8;
    --steel: #b8c8d8;
    --steel-light: #e8eef4;

    --bg: #f5f2ed;
    --sidebar-bg: var(--teal-deeper);
    --sidebar-hover: rgba(255,255,255,0.06);
    --sidebar-text: rgba(255,255,255,0.5);
    --sidebar-text-active: #ffffff;
    --card-bg: #ffffff;
    --text-primary: #1a2a2a;
    --text-secondary: #4a5e5e;
    --text-muted: #8a9a9a;

    --sage: #6a9a6a;
    --sage-light: #eaf4ea;
    --rose: #b86060;
    --rose-light: #f8eaea;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, system-ui, sans-serif;
    --radius: 14px;
    --shadow: 0 2px 12px rgba(0,0,0,0.05);
    --shadow-hover: 0 6px 24px rgba(0,0,0,0.08);
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base +1px for rem-based typography (MudBlazor, relative units) — pairs with explicit px bumps below */
html {
    font-size: 17px;
}

html, body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
    font-family: var(--font-display) !important;
}

/* ── Theme toggle ── */
.theme-toggle {
    position: relative;
}

.theme-icon-dark { display: none; }
.theme-icon-light { display: block; }

html.theme-dark .theme-icon-light { display: none; }
html.theme-dark .theme-icon-dark { display: block; }

/* ── Dark theme overrides ── */
html.theme-dark {
    --bg: #0e1a1a;
    --card-bg: #162525;
    --cream: #1a2a2a;
    --cream-dark: #223535;
    --text-primary: #e8ecec;
    --text-secondary: #b8c8c8;
    --text-muted: #7a8a8a;
    --shadow: 0 2px 12px rgba(0,0,0,0.4);
    --shadow-hover: 0 6px 24px rgba(0,0,0,0.5);
    --teal-light: rgba(26,107,106,0.18);
    --gold-light: rgba(200,164,78,0.14);
    --sage-light: rgba(106,154,106,0.14);
    --rose-light: rgba(184,96,96,0.14);
}

html.theme-dark body {
    background: var(--bg);
    color: var(--text-primary);
}