/* ═══════════════════════════════════════════════════════════════
   MilWallet — Brand System v2.0
   Design tokens, typography, component overrides
   Applied as the LAST stylesheet so it wins specificity battles
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts: unified typography ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ══════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════ */
:root {
    /* ── Backgrounds ── */
    --bg-primary:    #0B0F1A;   /* deepest navy */
    --bg-elevated:   #131621;   /* elevated surfaces */
    --bg-card:       #1A1F2E;   /* card backgrounds */
    --bg-card-hover: #1E2436;   /* card hover */

    /* ── Legacy variable remapping (olive/sand → dark) ── */
    --sand:          #0B0F1A;   /* was warm sand, now deep navy */
    --sand-dark:     #131621;   /* was darker sand, now elevated */
    --white:         #1A1F2E;   /* was white, now card bg */
    --ink:           #F0F0F5;   /* was near-black, now light text */
    --slate:         #8A8A9C;   /* secondary text */
    --olive:         #D4A853;   /* was olive green, now gold */
    --olive-light:   #E0B866;   /* gold hover */
    --gold:          #D4A853;   /* primary accent gold */
    --gold-light:    #E0B866;   /* gold hover */

    /* ── Borders ── */
    --border:        rgba(255, 255, 255, 0.06);
    --border-hover:  rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.14);

    /* ── Gold/Accent ── */
    --accent:        #D4A853;
    --accent-hover:  #E0B866;
    --accent-subtle: rgba(212, 168, 83, 0.10);
    --accent-border: rgba(212, 168, 83, 0.25);

    /* ── Semantic: text hierarchy ── */
    --text-primary:   #F0F0F5;
    --text-secondary: #8A8A9C;
    --text-muted:     #5C5C6E;

    /* ── Semantic: status ── */
    --positive:     #4ADE80;
    --positive-bg:  rgba(74, 222, 128, 0.10);
    --negative:     #F87171;
    --negative-bg:  rgba(248, 113, 113, 0.10);
    --warning:      #FBBF24;
    --warning-bg:   rgba(251, 191, 36, 0.10);
    --info:         #60A5FA;
    --info-bg:      rgba(96, 165, 250, 0.10);

    /* ── Legacy semantic remaps ── */
    --green:         #4ADE80;
    --green-light:   rgba(74, 222, 128, 0.12);
    --red-muted:     #F87171;
    --blue:          #60A5FA;
    --blue-light:    rgba(96, 165, 250, 0.12);
    --amber:         #FBBF24;
    --amber-light:   rgba(251, 191, 36, 0.12);
    --combat:        #F87171;
    --combat-light:  rgba(248, 113, 113, 0.12);

    /* ── Data viz palette ── */
    --data-1: #D4A853;   /* gold */
    --data-2: #60A5FA;   /* blue */
    --data-3: #4ADE80;   /* green */
    --data-4: #F97316;   /* orange */
    --data-5: #A78BFA;   /* purple */
    --data-6: #F472B6;   /* pink */

    /* ── Typography ── */
    --font-display: 'Space Grotesk', -apple-system, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

    /* ── Type Scale ── */
    /* xs → caption text, tiny labels, legal copy        */
    /* sm → secondary nav, badges, form hints             */
    /* base → body text, card paragraphs                 */
    /* lg → intro text, large body, card subheads        */
    /* xl → minor headings, sidebar titles               */
    /* 2xl → H4, card headers                           */
    /* 3xl → H3, section headings                        */
    /* 4xl → H2, major section headings                  */
    /* 5xl → H1, hero subheadlines                       */
    /* display → hero headline, splash text              */
    --text-xs:      0.75rem;    /* 12px */
    --text-sm:      0.875rem;   /* 14px */
    --text-base:    1rem;       /* 16px */
    --text-lg:      1.125rem;   /* 18px */
    --text-xl:      1.25rem;    /* 20px */
    --text-2xl:     1.5rem;     /* 24px */
    --text-3xl:     1.875rem;   /* 30px */
    --text-4xl:     2.25rem;    /* 36px */
    --text-5xl:     3rem;       /* 48px */
    --text-display: clamp(2.75rem, 6vw, 4.5rem); /* 44–72px, fluid */

    /* ── Font Weights ── */
    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    800;

    /* ── Line Heights ── */
    --lh-tight:   1.1;   /* hero headlines, display text */
    --lh-snug:    1.25;  /* large headings H2/H3         */
    --lh-normal:  1.5;   /* standard body text           */
    --lh-relaxed: 1.7;   /* long-form body, card text    */
    --lh-loose:   2.0;   /* data labels, form hints      */

    /* ── Letter Spacing ── */
    --ls-tight:   -0.03em;  /* display / hero (Space Grotesk) */
    --ls-snug:    -0.02em;  /* H1–H3                          */
    --ls-normal:   0em;     /* body text                      */
    --ls-wide:     0.04em;  /* small caps, secondary labels   */
    --ls-wider:    0.06em;  /* table headers, ALL CAPS labels */
    --ls-widest:   0.10em;  /* eyebrow tags, category labels  */
}

/* ══════════════════════════════════════
   BASE
   ══════════════════════════════════════ */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body) !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* ══════════════════════════════════════
   GLOBAL CONTAINER SYSTEM
   All pages must use .container (or .container-sm)
   for main content — never hardcode widths.
   ══════════════════════════════════════ */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.container-sm {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
}

/* ── Text alignment utilities ── */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

/* ── Flex centering (section-level) ── */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ══════════════════════════════════════
   NAVIGATION — dark glass override
   ══════════════════════════════════════ */
nav {
    background: rgba(11, 15, 26, 0.85) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Kill the light nav border on app pages */
.nav-inner {
    border-bottom: none !important;
}

/* ── Logo ── */
.logo {
    font-family: var(--font-display) !important;
    color: var(--text-primary) !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.logo span {
    color: var(--accent) !important;
}

/* Logo mark — prepend to .logo via ::before using a small shield icon */
.logo-mark {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Nav tag/pill override */
.nav-tag {
    background: var(--accent-subtle) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent-border) !important;
}

/* ── Nav links ── */
.nav-link {
    color: var(--text-secondary) !important;
}

.nav-link:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.nav-link.active {
    color: var(--accent) !important;
    background: var(--accent-subtle) !important;
}

/* ══════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════ */
.btn-primary,
button.btn-primary,
a.btn-primary {
    font-family: var(--font-display) !important;
    background: var(--accent) !important;
    color: #0B0F1A !important;
    border: none !important;
    font-weight: 600 !important;
    transition: background 0.2s, transform 0.1s !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-1px);
}

.btn-ghost,
button.btn-ghost,
a.btn-ghost {
    font-family: var(--font-display) !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

/* ══════════════════════════════════════
   CARDS & SURFACES
   ══════════════════════════════════════ */
.card,
.section-card,
.comp-card,
.optimizer-card,
.plan-card,
.breakdown-card,
.chart-card,
.info-card,
.scenario-card,
.budget-card,
.stat-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

/* ── Card headings ── */
.card h2, .card h3, .card h4,
.section-card h2, .section-card h3,
.stat-card h2, .stat-card h3,
.comp-card h2, .comp-card h3,
.optimizer-card h2, .optimizer-card h3,
.plan-card h2, .plan-card h3 {
    color: var(--text-primary) !important;
}

/* ── Card labels/secondary text ── */
.label, .stat-label, .comp-label,
.card p, .section-card p {
    color: var(--text-secondary) !important;
}

/* ══════════════════════════════════════
   FORM INPUTS
   ══════════════════════════════════════ */
input, select, textarea {
    background: var(--bg-elevated) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--accent-subtle) !important;
}

select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* ══════════════════════════════════════
   TABLES
   ══════════════════════════════════════ */
table {
    background: transparent;
}

thead tr {
    background: var(--bg-elevated) !important;
}

th {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

td {
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

tbody tr:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* ══════════════════════════════════════
   PROGRESS BARS & METERS
   ══════════════════════════════════════ */
.progress-track,
.bar-track {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* ══════════════════════════════════════
   DIVIDERS & SEPARATORS
   ══════════════════════════════════════ */
hr,
.divider {
    border-color: var(--border) !important;
}

/* ══════════════════════════════════════
   SEMANTIC BADGES / STATUS
   ══════════════════════════════════════ */
.badge-positive, .tag-positive, .badge-green {
    background: var(--positive-bg) !important;
    color: var(--positive) !important;
    border: 1px solid rgba(74, 222, 128, 0.2) !important;
}

.badge-negative, .tag-negative, .badge-red {
    background: var(--negative-bg) !important;
    color: var(--negative) !important;
    border: 1px solid rgba(248, 113, 113, 0.2) !important;
}

.badge-warning, .tag-warning, .badge-amber {
    background: var(--warning-bg) !important;
    color: var(--warning) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
}

.badge-info, .tag-info, .badge-blue {
    background: var(--info-bg) !important;
    color: var(--info) !important;
    border: 1px solid rgba(96, 165, 250, 0.2) !important;
}

/* ══════════════════════════════════════
   INLINE OLIVE/GREEN ACCENTS → GOLD
   Catches elements using olive color directly
   ══════════════════════════════════════ */
.accent, .gold-text {
    color: var(--accent) !important;
}

.accent-bg {
    background: var(--accent-subtle) !important;
    border-color: var(--accent-border) !important;
}

/* ══════════════════════════════════════
   SCROLLBAR (webkit)
   ══════════════════════════════════════ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ══════════════════════════════════════
   SELECTION
   ══════════════════════════════════════ */
::selection {
    background: var(--accent-subtle);
    color: var(--text-primary);
}

/* ══════════════════════════════════════
   TYPOGRAPHY HIERARCHY
   Semantic heading + body styles.
   Supplement inline font specs on pages.
   ══════════════════════════════════════ */

/* ── Display / Hero ── */
.type-display {
    font-family: var(--font-display) !important;
    font-size: var(--text-display) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-tight) !important;
    letter-spacing: var(--ls-tight) !important;
    color: var(--text-primary);
}

/* ── H1 ── */
h1, .type-h1 {
    font-family: var(--font-display) !important;
    font-size: var(--text-5xl) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-tight) !important;
    letter-spacing: var(--ls-snug) !important;
}

/* ── H2 ── */
h2, .type-h2 {
    font-family: var(--font-display) !important;
    font-size: var(--text-4xl) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-snug) !important;
    letter-spacing: var(--ls-snug) !important;
}

/* ── H3 ── */
h3, .type-h3 {
    font-family: var(--font-display) !important;
    font-size: var(--text-3xl) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    letter-spacing: -0.01em !important;
}

/* ── H4 ── */
h4, .type-h4 {
    font-family: var(--font-display) !important;
    font-size: var(--text-2xl) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    letter-spacing: var(--ls-normal) !important;
}

/* ── Body Large (intro, card lead text) ── */
.type-body-lg {
    font-family: var(--font-body) !important;
    font-size: var(--text-lg) !important;
    font-weight: var(--fw-normal) !important;
    line-height: var(--lh-relaxed) !important;
    letter-spacing: var(--ls-normal) !important;
    color: var(--text-secondary);
}

/* ── Body (default paragraphs) ── */
p, .type-body {
    font-family: var(--font-body) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--fw-normal) !important;
    line-height: var(--lh-relaxed) !important;
    letter-spacing: var(--ls-normal) !important;
}

/* ── Body Small ── */
.type-body-sm {
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    line-height: var(--lh-normal) !important;
}

/* ── Caption ── */
.type-caption {
    font-family: var(--font-body) !important;
    font-size: var(--text-xs) !important;
    line-height: var(--lh-normal) !important;
    color: var(--text-muted);
}

/* ── Data Label (financial figures, stats) ── */
.type-data {
    font-family: var(--font-display) !important;
    font-size: var(--text-xl) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: var(--ls-tight) !important;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.type-data-lg {
    font-family: var(--font-display) !important;
    font-size: var(--text-3xl) !important;
    font-weight: var(--fw-bold) !important;
    letter-spacing: var(--ls-tight) !important;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* ── Eyebrow / Label ── */
.type-eyebrow {
    font-family: var(--font-body) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: var(--ls-widest) !important;
    text-transform: uppercase !important;
    color: var(--accent);
}

/* ── Button Text ── */
.type-btn {
    font-family: var(--font-display) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: var(--ls-normal) !important;
}

/* ── Monospace (code, numbers, IDs) ── */
code, .type-mono {
    font-family: var(--font-mono) !important;
    font-size: 0.9em !important;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.1em 0.3em;
    border-radius: 3px;
    color: var(--accent);
}

/* ══════════════════════════════════════
   LOGO MARK
   ══════════════════════════════════════ */

/* Inline SVG logo mark sizing helpers */
.logo-mark-sm  { width: 18px; height: 20px; }
.logo-mark-md  { width: 22px; height: 24px; }
.logo-mark-lg  { width: 32px; height: 35px; }
.logo-mark-xl  { width: 40px; height: 44px; }

/* Logo in nav (text + mark combo) */
.logo {
    font-family: var(--font-display) !important;
    font-weight: var(--fw-bold) !important;
    font-size: 1.35rem !important;
    letter-spacing: -0.5px !important;
    color: var(--text-primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

.logo .logo-mark {
    flex-shrink: 0;
}

.logo .logo-word em,
.logo span {
    color: var(--accent) !important;
    font-style: normal;
}

/* ══════════════════════════════════════

   ██████╗ ██████╗  █████╗ ███╗   ██╗██████╗
   ██╔══██╗██╔══██╗██╔══██╗████╗  ██║██╔══██╗
   ██████╔╝██████╔╝███████║██╔██╗ ██║██║  ██║
   ██╔══██╗██╔══██╗██╔══██║██║╚██╗██║██║  ██║
   ██████╔╝██║  ██║██║  ██║██║ ╚████║██████╔╝
   ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝╚═════╝

   BRAND REFERENCE — MilWallet v3.0
   ══════════════════════════════════════

   MISSION:
     Financial intelligence for active-duty service members.
     Military precision meets financial clarity.

   DESIGN DIRECTION:
     Mercury (dark, minimal, premium) × Wealthsimple (editorial, warm, human)
     → Feels like a tool built by someone who's been deployed AND managed money.

   ── LOGO ──────────────────────────────────────────────────────
   Logo mark:    /public/logo-mark.svg (shield + rank chevrons + top bar)
   Favicon:      /public/favicon.svg   (32×32, bold, minimal)
   App icon:     /public/apple-touch-icon.svg (180×180, iOS)
   OG image:     /public/og-image.png  (1200×630, social share)

   In code:
     <img src="/logo-mark.svg" width="22" height="24" alt="">
     or inline the SVG for color control via CSS currentColor.

   ── COLORS ───────────────────────────────────────────────────
   PRIMARY BRAND
     Deep Navy       #0B0F1A  --bg-primary       Page background
     Elevated Navy   #131621  --bg-elevated      Sidebar, nav bg
     Card Navy       #1A1F2E  --bg-card          Card surfaces

   ACCENT
     Gold            #D4A853  --accent           Primary interactive
     Gold Hover      #E0B866  --accent-hover     Button hover state
     Gold Subtle     rgba(212,168,83,0.10)        Badge backgrounds
     Gold Border     rgba(212,168,83,0.25)        Badge borders

   TEXT HIERARCHY
     Primary         #F0F0F5  --text-primary      Main content
     Secondary       #8A8A9C  --text-secondary    Supporting text
     Muted           #5C5C6E  --text-muted        Timestamps, labels

   SEMANTIC STATUS (financial data)
     Positive/Green  #4ADE80  --positive          Gains, on-track
     Negative/Red    #F87171  --negative          Losses, over-budget
     Warning/Amber   #FBBF24  --warning           Approaching limit
     Info/Blue       #60A5FA  --info              Neutral data points

   DATA VISUALIZATION (6-color sequence)
     #D4A853  gold   — primary metric
     #60A5FA  blue   — comparison
     #4ADE80  green  — positive variance
     #F97316  orange — secondary metric
     #A78BFA  purple — tertiary metric
     #F472B6  pink   — highlight/outlier

   ── TYPOGRAPHY ──────────────────────────────────────────────
   Display font: Space Grotesk  (headers, buttons, logo)
   Body font:    Inter          (paragraphs, labels, nav)
   Mono font:    JetBrains Mono (code, numeric data)

   SCALE (CSS vars: --text-xs → --text-display)
     12px  --text-xs       caption, legal, micro labels
     14px  --text-sm       secondary nav, badges, hints
     16px  --text-base     body paragraphs
     18px  --text-lg       intro text, large body
     20px  --text-xl       minor headings
     24px  --text-2xl      H4, card headers
     30px  --text-3xl      H3, section headings
     36px  --text-4xl      H2, major sections
     48px  --text-5xl      H1
     fluid --text-display  hero headline (44–72px)

   UTILITY CLASSES
     .type-display   → hero headline
     .type-h1–h4     → semantic headings
     .type-body-lg   → intro / lead text
     .type-body      → standard paragraph
     .type-body-sm   → secondary body
     .type-caption   → micro labels
     .type-data      → financial figures (tabular-nums)
     .type-data-lg   → large stat numbers
     .type-eyebrow   → ALL CAPS category labels
     .type-btn       → button text
     .type-mono      → code / numbers

   ── SPACING ──────────────────────────────────────────────────
   Card padding:       1.5rem (24px)
   Section gap:        4rem–6rem (64–96px)
   Component gap:      1rem–1.5rem (16–24px)
   Line-height body:   1.7 (--lh-relaxed)
   Line-height display: 1.1 (--lh-tight)

   ── COMPONENTS ───────────────────────────────────────────────
   Border radius:
     Chips / pills:   100px
     Buttons:         10px
     Cards:           12–16px
     Inputs:          8px

   Borders:
     Default:  rgba(255,255,255,0.06)  --border
     Hover:    rgba(255,255,255,0.10)  --border-hover
     Strong:   rgba(255,255,255,0.14)  --border-strong

   ══════════════════════════════════════ */