/* =============================================================================
 * Vantage Quick Val — Direction 5 (TurboTax) Design Tokens
 *
 * Drop-in CSS custom properties for the D5 redesign of the 10-minute
 * valuation tool. All values are pulled directly from Direction_5_Final.html.
 *
 * Compatible with the existing Vantage token layer (vantage.css /
 * colors_and_type.css) — the brand color names match. The D5-specific
 * additions are namespaced --d5-* so they don't shadow tokens used by
 * other surfaces (dashboard, console, auth).
 *
 * Load order in index.html (recommended):
 *   1. vantage.css         (base + brand tokens)
 *   2. D5_tokens.css       (this file — overrides + D5 additions)
 *   3. Quick Val component CSS (new — see implementation notes)
 *
 * Substitution flag: no tokens here introduce new fonts. The brand
 * Georgia + system-sans stack from BRAND.md is preserved.
 * =============================================================================
 */

:root {

  /* ──────────────────────────────────────────────────────────────────────
   * BRAND COLORS — identical to vantage.css. Repeated here so D5_tokens.css
   * works standalone for prototypes, but in the real app these will be
   * inherited from vantage.css and the repeats below will be harmless.
   * ──────────────────────────────────────────────────────────────────── */
  --color-forest-deep:   #1A2E26;
  --color-forest-mid:    #2D4A3E;
  --color-forest-darker: #0F1F18;   /* hover ramp deeper than forest-deep */
  --color-green:         #4CAF7D;
  --color-neon-green:    #9EFF9E;
  --color-mint:          #C8FFD4;

  --color-near-black:    #0E0E0E;
  --color-charcoal:      #1C1C1E;
  --color-dark-gray:     #3D3D3D;
  --color-mid-gray:      #888888;
  --color-fg-2:          #555555;
  --color-border-light:  #E0DDD8;
  --color-divider:       #F0EDE8;
  --color-off-white:     #F4F3F0;
  --color-near-white:    #FAFAF8;
  --color-white:         #FFFFFF;

  --color-success: #4CAF7D;
  --color-warning: #E8A020;
  --color-danger:  #D94F4F;

  --color-bear-soft: rgba(220, 53, 69, 0.7);
  --color-bull-soft: rgba(40, 167, 69, 0.75);

  /* ──────────────────────────────────────────────────────────────────────
   * FONTS — identical to vantage.css; reproduced for standalone use.
   * ──────────────────────────────────────────────────────────────────── */
  --font-serif:
    Georgia, "Times New Roman", "Liberation Serif", serif;
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono:
    "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;


  /* ══════════════════════════════════════════════════════════════════════
   * D5 — TurboTax direction tokens
   * ══════════════════════════════════════════════════════════════════════ */

  /* ── D5 backgrounds ──────────────────────────────────────────────────
   * D5 introduces ONE new surface color — a faint mint wash for the
   * left-hand explainer column. Everything else reuses vantage.css.
   * ──────────────────────────────────────────────────────────────────── */
  --d5-bg-page:        #F4F3F0;  /* = --color-off-white */
  --d5-bg-card:        #FFFFFF;
  --d5-bg-input:       #FFFFFF;
  --d5-bg-input-alt:   #FAFAF8;
  --d5-bg-explain:     #EFF6F0;  /* NEW — faint mint wash, left explainer */
  --d5-bg-explain-bd:  #D8E5DA;  /* NEW — explainer border */
  --d5-bg-cream:       #F8F5EC;  /* light hold for hover/zebra (rare) */

  /* ── D5 text ─────────────────────────────────────────────────────────
   * D5 body type sits 1px larger than vantage.css default (15px not 14px)
   * because TurboTax-style copy is generous; the prompt explicitly calls
   * for plain-language explanation on every field.
   * ──────────────────────────────────────────────────────────────────── */
  --d5-fg-strong:      #1C1C1E;  /* = --color-charcoal — H1/H2, input text */
  --d5-fg-body:        #555555;  /* paragraph / sub copy / help */
  --d5-fg-muted:       #888888;  /* eyebrow, hint, disabled label */
  --d5-fg-accent:      #1A2E26;  /* primary action, link */
  --d5-fg-explain-h:   #1A2E26;  /* explainer headings */
  --d5-fg-explain-why: #2D4A3E;  /* "Why we ask" body */
  --d5-fg-explain-tag: #4CAF7D;  /* "Why we ask" eyebrow */

  /* ── D5 typography (semantic for D5 only — sizes already nicked from
   *    vantage but D5 uses slightly larger body + bigger H1 because the
   *    layout is roomier) ──────────────────────────────────────────── */
  --d5-h1-font:        var(--font-serif);
  --d5-h1-size:        36px;
  --d5-h1-weight:      400;
  --d5-h1-tracking:    -0.02em;
  --d5-h1-leading:     1.2;

  --d5-h2-font:        var(--font-serif);
  --d5-h2-size:        22px;
  --d5-h2-weight:      400;
  --d5-h2-tracking:    -0.02em;
  --d5-h2-leading:     1.25;

  --d5-h3-font:        var(--font-serif);
  --d5-h3-size:        18px;
  --d5-h3-weight:      400;
  --d5-h3-tracking:    -0.02em;
  --d5-h3-leading:     1.3;

  --d5-lede-size:      16px;
  --d5-lede-leading:   1.55;

  --d5-body-font:      var(--font-sans);
  --d5-body-size:      15px;
  --d5-body-leading:   1.6;

  --d5-help-size:      13px;          /* the "help text under every label" */
  --d5-help-leading:   1.5;
  --d5-help-color:     #555555;

  --d5-label-size:     14px;          /* field labels — heavier than vantage */
  --d5-label-weight:   600;

  --d5-eyebrow-size:   11px;
  --d5-eyebrow-weight: 700;
  --d5-eyebrow-tracking: 0.1em;
  --d5-eyebrow-transform: uppercase;
  --d5-eyebrow-color:  #4CAF7D;       /* "STEP X OF 5" — D5 uses green */

  --d5-input-size:     15px;

  --d5-section-header-size:     13px;  /* "Your saved analyses" */
  --d5-section-header-weight:   700;
  --d5-section-header-tracking: 0.1em;

  --d5-illust-size:    11px;          /* welcome-card mono illustration */

  /* ── D5 spacing — extends the base 4px scale ───────────────────────── */
  --d5-space-1:  4px;
  --d5-space-2:  8px;
  --d5-space-3:  12px;
  --d5-space-4:  16px;
  --d5-space-5:  24px;
  --d5-space-6:  32px;
  --d5-space-7:  48px;
  --d5-space-8:  64px;

  --d5-page-pad-y:     40px;
  --d5-page-pad-x:     32px;
  --d5-page-pad-bot:   160px;        /* leaves room for floating dev toolbar */
  --d5-page-max:       1100px;       /* form pages */
  --d5-library-max:    1100px;       /* library page */

  --d5-card-pad-y:     28px;
  --d5-card-pad-x:     32px;
  --d5-card-gap:       16px;         /* between stacked sections on a step */

  --d5-explain-pad-y:  24px;
  --d5-explain-pad-x:  22px;
  --d5-explain-width:  320px;
  --d5-explain-gap:    32px;         /* gap from explainer to form */
  --d5-explain-sticky-top: 220px;    /* must clear topbar (56) + stepper */

  --d5-field-gap:      18px;
  --d5-field-row-gap:  16px;
  --d5-input-pad-y:    13px;
  --d5-input-pad-x:    14px;

  /* ── D5 stepper geometry ───────────────────────────────────────────── */
  --d5-stepper-top:      56px;       /* sits flush below 56px topbar */
  --d5-stepper-pad-top:  24px;
  --d5-stepper-pad-side: 32px;
  --d5-stepper-bot:      18px;
  --d5-stepper-max:      1200px;     /* internal row max-width */
  --d5-stepper-bubble:   40px;       /* numbered circle size */
  --d5-stepper-rail-y:   19px;       /* y-position of the connecting rail */
  --d5-stepper-rail-w:   2px;
  --d5-stepper-rail-bg:  #E0DDD8;
  --d5-stepper-rail-on:  #1A2E26;

  /* ── D5 radii ──────────────────────────────────────────────────────── */
  --d5-radius-sm:     6px;           /* small chips, segmented controls */
  --d5-radius-input:  8px;
  --d5-radius-button: 8px;
  --d5-radius-card:   12px;
  --d5-radius-radio:  10px;          /* radio cards */
  --d5-radius-banner: 12px;
  --d5-radius-welcome: 16px;         /* the dark welcome hero on library */
  --d5-radius-pill:   999px;
  --d5-radius-dot:    50%;

  /* ── D5 borders ────────────────────────────────────────────────────── */
  --d5-border:        #E0DDD8;
  --d5-border-strong: 1.5px solid #E0DDD8;  /* radio cards */
  --d5-border-hair:   0.5px solid #E0DDD8;  /* hairline dividers inside cards */
  --d5-border-dashed: 1.5px dashed #4CAF7D; /* demo example card */
  --d5-border-on-explain: #D0E0D2;          /* divider inside explainer */
  --d5-divider:       #F0EDE8;

  /* ── D5 shadows ────────────────────────────────────────────────────── */
  --d5-shadow-card:        none;             /* default — borders only */
  --d5-shadow-card-hover:  0 4px 12px rgba(0, 0, 0, 0.04);
  --d5-shadow-focus-ring:  0 0 0 3px rgba(26, 46, 38, 0.10);
  --d5-shadow-radio-focus: 0 0 0 3px rgba(26, 46, 38, 0.08);
  --d5-shadow-toolbar:     0 8px 24px rgba(0, 0, 0, 0.20);
  --d5-shadow-tooltip:     0 4px 12px rgba(0, 0, 0, 0.20);
  --d5-shadow-step-active: 0 0 0 4px rgba(26, 46, 38, 0.08);

  /* ── D5 scenario / criteria colors (results view) ──────────────────── */
  --d5-base-tint:      rgba(26, 46, 38, 0.04);
  --d5-base-rule:      2px solid #1A2E26;

  --d5-cell-bear-bg:   rgba(217, 79, 79, 0.10);
  --d5-cell-bear-fg:   #8a2828;
  --d5-cell-bull-bg:   rgba(76, 175, 125, 0.10);
  --d5-cell-bull-fg:   #1f5a3f;
  --d5-cell-base-fg:   #1A2E26;

  --d5-crit-met-bg:    rgba(76, 175, 125, 0.06);
  --d5-crit-met-bd:    rgba(76, 175, 125, 0.25);
  --d5-crit-met-fg:    #2D6A4F;
  --d5-crit-flex-bg:   rgba(232, 160, 32, 0.08);
  --d5-crit-flex-bd:   rgba(232, 160, 32, 0.30);
  --d5-crit-flex-fg:   #8A5A0A;
  --d5-crit-miss-bg:   rgba(217, 79, 79, 0.06);
  --d5-crit-miss-bd:   rgba(217, 79, 79, 0.25);
  --d5-crit-miss-fg:   #8a2828;

  /* Sensitivity table grade ramp */
  --d5-grade-r-2:      rgba(217, 79, 79, 0.16);  /* worst */
  --d5-grade-r-2-fg:   #8a2828;
  --d5-grade-r-1-fg:   #555555;
  --d5-grade-n-fg:     #1C1C1E;
  --d5-grade-g-2:      rgba(76, 175, 125, 0.10);
  --d5-grade-g-2-fg:   #2D6A4F;
  --d5-grade-g-3:      rgba(76, 175, 125, 0.20); /* best */
  --d5-grade-g-3-fg:   #1f5a3f;

  /* ── D5 AI panel (forest-island, identical to vantage AI panel) ───── */
  --d5-ai-bg:          #1A2E26;
  --d5-ai-fg:          #9EFF9E;
  --d5-ai-fg-strong:   #C8FFD4;
  --d5-ai-eyebrow:     #4CAF7D;
  --d5-ai-pad-y:       26px;
  --d5-ai-pad-x:       30px;

  --d5-ai-badge-great-bg:    #C8FFD4;
  --d5-ai-badge-great-fg:    #1A2E26;
  --d5-ai-badge-good-bg:     rgba(158, 255, 158, 0.85);
  --d5-ai-badge-good-fg:     #1A2E26;
  --d5-ai-badge-ok-bg:       rgba(255, 255, 255, 0.18);
  --d5-ai-badge-ok-fg:       #C8FFD4;
  --d5-ai-badge-poor-bg:     rgba(232, 160, 32, 0.85);
  --d5-ai-badge-poor-fg:     #4a3300;
  --d5-ai-badge-terrible-bg: rgba(217, 79, 79, 0.85);
  --d5-ai-badge-terrible-fg: #FFFFFF;

  /* ── D5 welcome hero (library) ─────────────────────────────────────── */
  --d5-welcome-bg:       linear-gradient(135deg, #1A2E26 0%, #2D4A3E 100%);
  --d5-welcome-pad:      40px;
  --d5-welcome-h1-size:  38px;
  --d5-welcome-fg:       #FFFFFF;
  --d5-welcome-fg-body:  rgba(255, 255, 255, 0.85);
  --d5-welcome-pill-bg:  rgba(158, 255, 158, 0.15);
  --d5-welcome-pill-fg:  #9EFF9E;
  --d5-welcome-illust-bg: rgba(255, 255, 255, 0.06);
  --d5-welcome-illust-fg: #C8FFD4;
  --d5-welcome-illust-muted: rgba(255, 255, 255, 0.55);
  --d5-welcome-cta-bg:   #9EFF9E;
  --d5-welcome-cta-fg:   #1A2E26;
  --d5-welcome-cta-hover-bg: #C8FFD4;

  /* ── D5 results success banner ─────────────────────────────────────── */
  --d5-banner-bg:        linear-gradient(135deg, rgba(76, 175, 125, 0.12), rgba(158, 255, 158, 0.18));
  --d5-banner-bd:        #4CAF7D;
  --d5-banner-check-bg:  #4CAF7D;
  --d5-banner-check-fg:  #FFFFFF;

  /* ── D5 buttons ─────────────────────────────────────────────────────
   * D5 buttons are slightly larger than vantage default (13px pad-y, 26px
   * pad-x) — pairs with the roomier layout and TurboTax fingertip CTA feel.
   * ──────────────────────────────────────────────────────────────── */
  --d5-btn-pad-y:        13px;
  --d5-btn-pad-x:        26px;
  --d5-btn-pad-sm-y:     8px;
  --d5-btn-pad-sm-x:     16px;
  --d5-btn-size:         14px;
  --d5-btn-size-sm:      13px;
  --d5-btn-weight:       600;
  --d5-btn-radius:       var(--d5-radius-button);

  --d5-btn-primary-bg:        #1A2E26;
  --d5-btn-primary-fg:        #9EFF9E;
  --d5-btn-primary-hover-bg:  #2D4A3E;
  --d5-btn-primary-active-bg: #2D4A3E;

  --d5-btn-default-bg:        #FFFFFF;
  --d5-btn-default-fg:        #1C1C1E;
  --d5-btn-default-bd:        #E0DDD8;
  --d5-btn-default-hover-bd:  #888888;

  --d5-btn-ghost-bg:          transparent;
  --d5-btn-ghost-fg:          #1C1C1E;
  --d5-btn-ghost-hover-bd:    #888888;

  --d5-btn-link-fg:           #1A2E26;
  --d5-btn-link-hover-deco:   underline;

  --d5-btn-disabled-opacity:  0.55;

  /* ── D5 info icon ───────────────────────────────────────────────────
   * Information ⓘ — a 16px circle with green border on every field label
   * per the TurboTax spec. On hover, fills with green.
   * ──────────────────────────────────────────────────────────────── */
  --d5-info-size:       16px;
  --d5-info-fg:         #4CAF7D;
  --d5-info-bd:         #4CAF7D;
  --d5-info-hover-bg:   #4CAF7D;
  --d5-info-hover-fg:   #FFFFFF;
  --d5-info-glyph-font: var(--font-serif);
  --d5-info-glyph-size: 10px;

  --d5-tooltip-bg:      #1C1C1E;
  --d5-tooltip-fg:      #f0f0f0;
  --d5-tooltip-size:    12px;
  --d5-tooltip-leading: 1.4;
  --d5-tooltip-max-w:   280px;
  --d5-tooltip-pad-y:   8px;
  --d5-tooltip-pad-x:   12px;

  /* ── D5 toggle pill (flex toggles in Step 2 / Step 4) ──────────────── */
  --d5-tog-w:      36px;
  --d5-tog-h:      20px;
  --d5-tog-knob:   16px;
  --d5-tog-bg-off: #E0DDD8;
  --d5-tog-bg-on:  #1A2E26;
  --d5-tog-knob-bg: #FFFFFF;
  --d5-tog-knob-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

  /* ── D5 chips (filter chips + sectors-of-focus tags) ───────────────── */
  --d5-chip-pad-y:     8px;
  --d5-chip-pad-x:     14px;
  --d5-chip-size:      13px;
  --d5-chip-radius:    var(--d5-radius-pill);
  --d5-chip-bg:        #FFFFFF;
  --d5-chip-fg:        #555555;
  --d5-chip-bd:        #E0DDD8;
  --d5-chip-active-bg: #1A2E26;
  --d5-chip-active-fg: #9EFF9E;

  /* ── D5 progress-save reassurance row ──────────────────────────────── */
  --d5-save-bg:        #FAFAF8;
  --d5-save-bd:        #F0EDE8;
  --d5-save-pad-y:     10px;
  --d5-save-pad-x:     16px;
  --d5-save-size:      12.5px;
  --d5-save-fg:        #555555;
  --d5-save-check-bg:  #4CAF7D;
  --d5-save-check-fg:  #FFFFFF;

  /* ── D5 deal cards (library grid) ──────────────────────────────────── */
  --d5-deal-pad:       20px;
  --d5-deal-radius:    12px;
  --d5-deal-bd:        #E0DDD8;
  --d5-deal-name-size: 18px;
  --d5-deal-stat-size: 16px;

  --d5-crit-dot-met:   #4CAF7D;
  --d5-crit-dot-flex:  #E8A020;
  --d5-crit-dot-miss:  #D94F4F;

  /* ── D5 floating dev toolbar (prototype-only, can be omitted in prod) ─ */
  --d5-dev-bg:         #1C1C1E;
  --d5-dev-fg:         #f0f0f0;
  --d5-dev-pad-y:      8px;
  --d5-dev-pad-x:      10px;
  --d5-dev-radius:     999px;
  --d5-dev-btn:        28px;

  /* ── D5 timing (motion) — short + subtle per brand ─────────────────── */
  --d5-t-fast:    0.15s;   /* hover, focus, color swap */
  --d5-t-medium:  0.2s;    /* radio-card select */
  --d5-t-slow:    0.25s;   /* fade-in step transition */
  --d5-t-progress: 0.3s;   /* stepper rail width animation */
  --d5-ease:      ease;
  --d5-ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ── D5 z-index ───────────────────────────────────────────────────── */
  --d5-z-topbar:     200;
  --d5-z-stepper:    150;
  --d5-z-tooltip:     30;
  --d5-z-dev-bar:    500;
}

/* =============================================================================
 * D5 keyframes — exported here so the implementing component CSS file can
 * @keyframes-reference them by name without re-declaring.
 * ============================================================================= */

@keyframes d5-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes d5-progress-grow {
  from { width: 0%; }
  to   { width: var(--prog, 0%); }
}