/* ==========================================================================
   base.css — FolioForecast Shared Design Tokens & Reset
   Used by: All standalone pages (landing, pricing, legal pages)
   Light mode = default, Dark mode = [data-theme="dark"]
   ========================================================================== */

/* ==========================================================================
   LIGHT THEME (Default) — Clean, professional, Fidelity/Schwab inspired
   ========================================================================== */
:root {
    /* Background Colors — warm cream canvas */
    --bg-primary: #ffffff;
    --bg-secondary: #f3f0eb;
    --bg-tertiary: #ece8e2;
    --bg-card: #ffffff;
    --bg-input: #f3f0eb;
    --bg-hover: #ece8e2;

    /* Text Colors — high contrast for readability */
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --text-dim: #9ca3af;

    /* Accent Colors — institutional, trustworthy */
    --accent-blue: #00539b;              /* Deep institutional blue */
    --accent-blue-hover: #003d73;
    --accent-blue-light: rgba(0, 83, 155, 0.08);
    --accent-purple: #4f46e5;
    --accent-green: #00873d;             /* Fidelity green — conservative, trustworthy */
    --accent-green-light: rgba(0, 135, 61, 0.08);
    --accent-amber: #b45309;
    --accent-amber-light: rgba(180, 83, 9, 0.06);
    --accent-danger: #b91c1c;

    /* Borders — warm neutral */
    --border-color: #e0dbd4;
    --border-light: #ece8e2;

    /* Shadows — subtle, professional */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);

    /* Navigation & Footer */
    --nav-bg: rgba(255, 255, 253, 0.94);
    --nav-border: #e0dbd4;
    --footer-bg: #111827;
    --footer-text: #e5e7eb;

    /* Component-specific */
    --card-border: 1px solid #e0dbd4;
    --table-stripe: #f3f0eb;
    --chart-bg: #ffffff;

    /* Fonts */
    --font-display: "DM Serif Display", Georgia, serif;
    --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-inter: 'Inter', sans-serif;
}

/* ==========================================================================
   DARK THEME — [data-theme="dark"]
   ========================================================================== */
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a24;
    --bg-card: #1a2235;
    --bg-input: #12121a;
    --bg-hover: #1a1a24;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-muted: #6b7280;
    --text-dim: #64748b;

    /* Accent Colors */
    --accent-blue: #3b82f6;
    --accent-blue-hover: #2563eb;
    --accent-blue-light: rgba(59, 130, 246, 0.12);
    --accent-purple: #8b5cf6;
    --accent-green: #10b981;
    --accent-green-light: rgba(16, 185, 129, 0.12);
    --accent-amber: #f59e0b;
    --accent-amber-light: rgba(245, 158, 11, 0.08);
    --accent-danger: #ef4444;

    /* Borders */
    --border-color: #2a2a3a;
    --border-light: #1e293b;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* Navigation & Footer */
    --nav-bg: rgba(10, 10, 15, 0.85);
    --nav-border: #2a2a3a;
    --footer-bg: #111827;
    --footer-text: #e2e8f0;

    /* Component-specific */
    --card-border: 1px solid #2a2a3a;
    --table-stripe: #12121a;
    --chart-bg: #1a2235;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth theme transitions */
*,
*::before,
*::after {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}