/*
 * Verapath Design System — CSS Custom Properties
 * Source of truth: Figma file "Verapath Web Design Components"
 * Do not edit values here without also updating the Figma file.
 */

/* ── Box-sizing reset — ensures padding is included in element widths on all
   pages, matching the behaviour Framer CSS applies on the Home and About pages. */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    /* ── Core Brand Colors ─────────────────────────────────────── */
    --color-midnight:         #223029;
    --color-white:            #ffffff;
    --color-bright-green:     #a3e96b;
    --color-green:            #0ea665;
    --color-red:              #f9574d;
    --color-lemon:            #FFF515;
    --color-purple:           #bca9f1;

    /* ── Grays ─────────────────────────────────────────────────── */
    --color-gray-01:          #909893;
    --color-gray-02:          #b9c0be;
    --color-gray-03:          #e0e3e2;
    --color-gray-04:          #f7f7f7;

    /* ── Tints ─────────────────────────────────────────────────── */
    --color-mint:             #daf4dd;
    --color-mint-50:          #edfaee;
    --color-light-purple:     #e5daf4;
    --color-light-purple-50:  #f1edfa;
    --color-beige:            #f1e9e2;
    --color-beige-50:         #f8f4f0;
    --color-pale-yellow:      #FFFCB1;
    --color-pale-yellow-50:   #FFFDD8;

    /* ── Status colors (semantic) ──────────────────────────────────
       Use these for any "this is a state" surface — KPIs, badges,
       chips, alert icons. Replaces the deprecated --airisk-grey /
       --airisk-green / --airisk-red trio that legacy widgets still
       reach for. New code MUST prefer the tokens below.

       Each role has a foreground (text/icon) + a low-alpha tint
       suitable for chip backgrounds against the light or dark canvas.
    ── */
    --vp-status-success:      var(--color-green);
    --vp-status-success-tint: rgba(14, 166, 101, 0.12);
    --vp-status-warning:      #b88a00;
    --vp-status-warning-tint: rgba(184, 138, 0, 0.14);
    --vp-status-danger:       var(--color-red);
    --vp-status-danger-tint:  rgba(249, 87, 77, 0.12);
    --vp-status-neutral:      var(--color-gray-01);
    --vp-status-neutral-tint: rgba(34, 48, 41, 0.06);

    /* ── Typography ─────────────────────────────────────────────── */
    --font-size-label:        14px;
    --font-size-body:         16px;
    /* Numeric type scale — five steps from "page hero" to "fine print".
       Display is reserved for the largest in-page number (KPI hero
       value, page-level metric); heading is the section/card title;
       body and caption are for prose; micro is for legend chips and
       trend badges. Sized in clamp() so they breathe on wider monitors
       without exploding on narrow cards. */
    --font-size-display:      clamp(24px, 2.4vw, 32px);
    --font-size-heading:      clamp(18px, 1.6vw, 22px);
    --font-size-body-sm:      14px;
    --font-size-caption:      12px;
    --font-size-micro:        10px;
    --font-weight-regular:    400;
    --font-weight-medium:     500;
    --font-weight-bold:       700;
    --color-text:             var(--color-midnight);
    --color-placeholder:      var(--color-gray-01);

    /* ── Buttons ─────────────────────────────────────────────────  */
    --btn-height:             44px;
    --btn-padding:            10px 20px;
    --btn-border-radius:      6px;
    --btn-font-weight:        var(--font-weight-bold);

    --btn-primary-bg:         var(--color-bright-green);
    --btn-primary-text:       var(--color-midnight);
    --btn-primary-bg-hover:   #8fd455;
    --btn-primary-bg-active:  #7bbf47;
    --btn-primary-bg-disabled:var(--color-gray-03);
    --btn-primary-text-disabled: var(--color-gray-01);

    --btn-secondary-bg:       var(--color-gray-03);
    --btn-secondary-text:     var(--color-midnight);
    --btn-secondary-bg-hover: var(--color-gray-02);
    --btn-secondary-bg-active:#a8b0ae;

    --btn-tertiary-bg:        var(--color-red);
    --btn-tertiary-text:      var(--color-white);
    --btn-tertiary-bg-hover:  #e03e34;
    --btn-tertiary-bg-active: #c73530;

    /* ── Form Inputs ─────────────────────────────────────────────  */
    --input-height:           59px;
    --input-border-radius:    6px;
    --input-border:           1px solid var(--color-gray-02);
    --input-padding:          18px 12px;
    --input-bg:               var(--color-white);
    --input-text:             var(--color-midnight);
    --input-focus-border:     2px solid var(--color-bright-green);
    --input-error-border:     2px solid var(--color-red);
    --input-error-text:       var(--color-red);
    --textarea-min-height:    137px;
    --vp-field-gap:           6px;
    --vp-field-label-gap:     3px;
    --vp-field-message-gap:   8px;
    --vp-field-inline-gap:    8px;
    --vp-field-padding-x:     12px;
    --vp-textarea-padding:    12px;
    --vp-form-gap:            18px;
    --vp-form-gap-compact:    14px;
    --vp-form-section-gap:    18px;
    --vp-form-section-gap-compact: 14px;

    /* ── Spacing Scale (4px base) ──────────────────────────────
       Use these for margin, padding, and gap. Component-internal
       micro-adjustments (1–3px) may remain as raw values.
    ── */
    --space-0:                0;
    --space-1:                4px;
    --space-2:                8px;
    --space-3:                12px;
    --space-4:                16px;
    --space-5:                20px;
    --space-6:                24px;
    --space-7:                32px;
    --space-8:                40px;
    --space-9:                48px;
    --space-10:               64px;

    /* ── Radius ──────────────────────────────────────────────────  */
    --border-radius-sm:       4px;
    --border-radius-md:       6px;
    --border-radius-lg:       12px;

    /* ── Component Semantic Tokens ───────────────────────────────
       These flip between light and dark mode. Always use these in
       component CSS instead of raw color primitives.
    ── */
    --vp-label-color:         var(--color-midnight);
    --vp-input-color:         var(--color-midnight);
    --vp-placeholder-color:   var(--color-gray-01);
    --vp-surface-input:       var(--color-white);
    --vp-surface-disabled:    var(--color-gray-04);
    --vp-surface-hover:       var(--color-gray-03);
    --vp-border-default:      var(--color-gray-02);
    --vp-border-disabled:     var(--color-gray-03);
    --vp-border-hover:        var(--color-midnight);
    --vp-content-bg:          var(--color-gray-04);
    --vp-content-text:        var(--color-midnight);
    --vp-code-bg:             var(--color-gray-03);
    --vp-divider:             var(--color-gray-03);

    /* Chart segment palette — light mode picks deep, saturated tones
       so slices stay visible on white surfaces. Each color targets at
       least 4.5:1 contrast against #ffffff. Dark mode overrides below
       swap to airier brand tones for visibility on the dark surface.
       The paired *-on tokens give the readable label color for each
       slice so SVG data labels stay legible across themes (Codex P2 —
       contrast picked from a fixed-hex map was wrong in dark mode). */
    --vp-chart-1:             #0a5c3a;
    --vp-chart-2:             #6e3ec9;
    --vp-chart-3:             #c93a3a;
    --vp-chart-4:             #9c5d00;
    --vp-chart-5:             var(--color-midnight);
    --vp-chart-6:             #1f5c9c;
    --vp-chart-7:             #5e6a64;
    --vp-chart-8:             #8b1c4d;
    --vp-chart-1-on:          var(--color-white);
    --vp-chart-2-on:          var(--color-white);
    --vp-chart-3-on:          var(--color-white);
    --vp-chart-4-on:          var(--color-white);
    --vp-chart-5-on:          var(--color-white);
    --vp-chart-6-on:          var(--color-white);
    --vp-chart-7-on:          var(--color-white);
    --vp-chart-8-on:          var(--color-white);

    /* ── Typography Stacks ───────────────────────────────────────
       Promoted from inline `var(--font-*, "…")` fallbacks scattered
       across components so the design language is consistent.
    ── */
    --font-heading:           "Season Sans SemiBold", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    --font-body:              "Season Sans Regular", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    --font-serif:             "Serrif Medium", Georgia, "Times New Roman", serif;
    --font-mono:              ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
    /* Hero numerals on dashboard KPI cards (and similar metric-display
       contexts). Uses the brand Serrif face for a deliberate annual-
       report / editorial publication feel — a financial-services AI
       risk product reads as more authoritative with serif numerals
       than yet another sans-serif metric. Falls back to Georgia (a
       designed-for-screen serif on every OS) before generic serif so
       the numeral aesthetic survives even when the brand WOFF hasn't
       loaded yet. */
    --font-display-numerals:  "Serrif Medium", Georgia, "Times New Roman", serif;

    /* ── Card / Canvas Surfaces ───────────────────────────────── */
    --vp-canvas-bg:           var(--color-gray-04);
    --vp-card-bg:             var(--color-white);
    --vp-card-border:         rgba(15, 23, 19, 0.06);
    --vp-card-shadow:         0 18px 40px rgba(15, 23, 19, 0.06);
}

/* ── Dark Mode Overrides ──────────────────────────────────────────
   Add [data-theme="dark"] to any ancestor element and all
   descendants will pick up these overrides via CSS custom property
   inheritance.
*/
.dark,
[data-theme="dark"] {
    --color-text:             var(--color-white);
    --input-bg:               #243b2f;
    --input-text:             var(--color-white);
    --input-border:           1px solid #4a6057;

    --vp-label-color:         var(--color-white);
    --vp-input-color:         var(--color-white);
    --vp-placeholder-color:   #6b8075;
    --vp-surface-input:       #243b2f;
    --vp-surface-disabled:    #1a2922;
    --vp-surface-hover:       #2d4038;
    --vp-border-default:      #4a6057;
    --vp-border-disabled:     #2d3d35;
    --vp-border-hover:        var(--color-white);
    --vp-content-bg:          #1a2922;
    --vp-content-text:        var(--color-white);
    --vp-code-bg:             #2d4038;
    --vp-divider:             #2d4038;

    /* Chart palette (dark mode) — bright tones that pop on the dark
       surface. The paired *-on tokens flip to dark text since each
       slice color is now light-luminance. */
    --vp-chart-1:             var(--color-bright-green);
    --vp-chart-2:             var(--color-purple);
    --vp-chart-3:             var(--color-red);
    --vp-chart-4:             var(--color-lemon);
    --vp-chart-5:             var(--color-mint);
    --vp-chart-6:             #87b9eb;
    --vp-chart-7:             var(--color-gray-02);
    --vp-chart-8:             var(--color-light-purple);
    --vp-chart-1-on:          var(--color-midnight);
    --vp-chart-2-on:          var(--color-midnight);
    --vp-chart-3-on:          var(--color-white);
    --vp-chart-4-on:          var(--color-midnight);
    --vp-chart-5-on:          var(--color-midnight);
    --vp-chart-6-on:          var(--color-midnight);
    --vp-chart-7-on:          var(--color-midnight);
    --vp-chart-8-on:          var(--color-midnight);

    --vp-canvas-bg:           #1a2922;
    --vp-card-bg:             color-mix(in srgb, var(--color-midnight) 86%, #000 14%);
    --vp-card-border:         rgba(255, 255, 255, 0.08);
    --vp-card-shadow:         0 22px 44px rgba(0, 0, 0, 0.28);

    --btn-secondary-bg:       #2d4038;
    --btn-secondary-text:     var(--color-white);
    --btn-secondary-bg-hover: #3d5246;
    --btn-secondary-bg-active:#4a6057;
}

/* ── Force light mode on any element ────────────────────────────── */
[data-theme="light"] {
    --color-text:             var(--color-midnight);
    --input-bg:               var(--color-white);
    --input-text:             var(--color-midnight);
    --input-border:           1px solid var(--color-gray-02);
    --vp-label-color:         var(--color-midnight);
    --vp-input-color:         var(--color-midnight);
    --vp-placeholder-color:   var(--color-gray-01);
    --vp-surface-input:       var(--color-white);
    --vp-surface-disabled:    var(--color-gray-04);
    --vp-surface-hover:       var(--color-gray-03);
    --vp-border-default:      var(--color-gray-02);
    --vp-border-disabled:     var(--color-gray-03);
    --vp-border-hover:        var(--color-midnight);
    --vp-content-bg:          var(--color-gray-04);
    --vp-content-text:        var(--color-midnight);
    --vp-code-bg:             var(--color-gray-03);
    --vp-divider:             var(--color-gray-03);

    /* Chart palette (light mode, explicit override). */
    --vp-chart-1:             #0a5c3a;
    --vp-chart-2:             #6e3ec9;
    --vp-chart-3:             #c93a3a;
    --vp-chart-4:             #9c5d00;
    --vp-chart-5:             var(--color-midnight);
    --vp-chart-6:             #1f5c9c;
    --vp-chart-7:             #5e6a64;
    --vp-chart-8:             #8b1c4d;
    --vp-chart-1-on:          var(--color-white);
    --vp-chart-2-on:          var(--color-white);
    --vp-chart-3-on:          var(--color-white);
    --vp-chart-4-on:          var(--color-white);
    --vp-chart-5-on:          var(--color-white);
    --vp-chart-6-on:          var(--color-white);
    --vp-chart-7-on:          var(--color-white);
    --vp-chart-8-on:          var(--color-white);

    --vp-canvas-bg:           var(--color-gray-04);
    --vp-card-bg:             var(--color-white);
    --vp-card-border:         rgba(15, 23, 19, 0.06);
    --vp-card-shadow:         0 18px 40px rgba(15, 23, 19, 0.06);
    --btn-secondary-bg:       var(--color-gray-03);
    --btn-secondary-text:     var(--color-midnight);
    --btn-secondary-bg-hover: var(--color-gray-02);
    --btn-secondary-bg-active:#a8b0ae;
}

/* ── Button Base Classes ─────────────────────────────────────────  */
.btn-primary, .btn-secondary, .btn-tertiary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-height);
    padding: var(--btn-padding);
    border-radius: var(--btn-border-radius);
    font-weight: var(--btn-font-weight);
    font-size: var(--font-size-body);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.btn-primary  { background-color: var(--btn-primary-bg);   color: var(--btn-primary-text); }
.btn-primary:hover   { background-color: var(--btn-primary-bg-hover); }
.btn-primary:active  { background-color: var(--btn-primary-bg-active); }
.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--btn-primary-bg-disabled);
    color: var(--btn-primary-text-disabled);
    cursor: not-allowed;
}
.btn-secondary { background-color: var(--btn-secondary-bg); color: var(--btn-secondary-text); }
.btn-secondary:hover  { background-color: var(--btn-secondary-bg-hover); }
.btn-secondary:active { background-color: var(--btn-secondary-bg-active); }
.btn-tertiary  { background-color: var(--btn-tertiary-bg);  color: var(--btn-tertiary-text); }
.btn-tertiary:hover  { background-color: var(--btn-tertiary-bg-hover); }
.btn-tertiary:active { background-color: var(--btn-tertiary-bg-active); }

/* ── Form Input Base Classes ─────────────────────────────────────  */
.input-group { display: flex; flex-direction: column; gap: var(--vp-field-gap); }
.input-group label { font-size: var(--font-size-label); font-weight: var(--font-weight-medium); color: var(--color-text); }
.form-input input, .form-input select, .form-input textarea {
    width: 100%; height: var(--input-height); padding: var(--input-padding);
    border: var(--input-border); border-radius: var(--input-border-radius);
    background-color: var(--input-bg); color: var(--input-text); font-size: var(--font-size-body);
}
.form-input textarea { height: auto; min-height: var(--textarea-min-height); resize: vertical; }
.form-input input:focus, .form-input select:focus, .form-input textarea:focus { outline: none; border: var(--input-focus-border); }
.form-input.error input, .form-input.error select, .form-input.error textarea { border: var(--input-error-border); }
.input-error-message { font-size: var(--font-size-label); color: var(--input-error-text); margin-top: var(--vp-field-message-gap); }
.form-input input::placeholder, .form-input textarea::placeholder { color: var(--color-placeholder); }

/* ── Checkbox ────────────────────────────────────────────────────  */
.checkbox-row { display: flex; align-items: center; gap: 12px; }
.checkbox-row .checkbox {
    width: 18px; height: 18px; border: 1px solid var(--color-gray-02);
    border-radius: var(--border-radius-sm); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.checkbox-row .checkbox.checked { background-color: var(--color-bright-green); border-color: var(--color-bright-green); }
.checkbox-row .checkbox.error   { border-color: var(--color-red); }
.checkbox-row label { font-size: var(--font-size-body); color: var(--color-text); cursor: pointer; }
/* ─────────────────────────────────────────────────────────────────
   APPEND to the bottom of verapath-variables.css.
   Adds conversation-specific semantic tokens and dark overrides.
   No existing tokens changed.
   ───────────────────────────────────────────────────────────────── */

:root {
    /* ── Conversation surfaces ───────────────────────────────── */
    --vp-msg-assistant-bg:      var(--color-white);
    --vp-msg-assistant-border:  var(--color-gray-03);
    --vp-msg-user-bg:           linear-gradient(160deg, rgba(163, 233, 107, 0.10) 0%, rgba(255, 255, 255, 1) 100%);
    --vp-msg-user-border:       var(--color-gray-03);
    --vp-msg-streaming-border:  rgba(163, 233, 107, 0.45);
    --vp-msg-streaming-ring:    rgba(163, 233, 107, 0.12);
    --vp-msg-shadow:            0 1px 4px rgba(34, 48, 41, 0.04);

    --vp-speaker-color:         var(--color-green);
    --vp-msg-kind-color:        var(--color-gray-01);
    --vp-msg-body-color:        var(--color-midnight);

    /* ── Composer gradient (matches page background) ─────────── */
    --vp-composer-fade-from:    rgba(247, 250, 248, 0);
    --vp-composer-fade-mid:     rgba(247, 250, 248, 0.97);
    --vp-composer-fade-to:      rgba(247, 250, 248, 1);

    /* ── Suggestion chip ─────────────────────────────────────── */
    --vp-suggestion-bg:         var(--color-white);
    --vp-suggestion-border:     var(--color-gray-03);
    --vp-suggestion-border-hover: var(--color-bright-green);
    --vp-suggestion-shadow:     0 1px 3px rgba(34, 48, 41, 0.04);
    --vp-suggestion-shadow-hover:
        0 0 0 3px rgba(163, 233, 107, 0.15),
        0 6px 20px rgba(163, 233, 107, 0.14);

    /* ── Steps ───────────────────────────────────────────────── */
    --vp-step-chip-bg:          var(--color-gray-04);
    --vp-step-chip-border:      var(--color-gray-03);
    --vp-step-chip-text:        var(--color-gray-01);
    --vp-step-chip-hover-bg:    var(--color-gray-03);
    --vp-step-chip-hover-border:var(--color-gray-02);
    --vp-step-chip-hover-text:  var(--color-midnight);
    --vp-step-shimmer:          rgba(163, 233, 107, 0.20);
    --vp-step-list-border:      var(--color-gray-03);
    --vp-step-row-hover:        var(--color-gray-04);
    --vp-step-detail-bg:        var(--color-gray-04);
    --vp-step-dot-color:        var(--color-gray-02);

    /* ── Citations ───────────────────────────────────────────── */
    --vp-citation-bg:           var(--color-gray-04);
    --vp-citation-border:       var(--color-gray-03);
    --vp-citation-num-bg:       var(--color-midnight);
    --vp-citation-num-color:    var(--color-bright-green);
    --vp-citation-link:         var(--color-green);
    --vp-citation-hover-bg:     color-mix(in srgb, var(--color-bright-green) 10%, var(--color-gray-04));

    /* ── Action icon buttons (feedback / copy) ───────────────── */
    --vp-action-btn-color:      var(--color-gray-01);
    --vp-action-btn-hover-bg:   var(--color-gray-04);
    --vp-action-btn-hover-color:var(--color-midnight);

    /* ── Typing / cursor ─────────────────────────────────────── */
    --vp-typing-dot-color:      var(--color-gray-02);
    --vp-cursor-color:          var(--color-midnight);

    /* ── File preview card inside transcript ─────────────────── */
    --vp-preview-bg:            var(--color-gray-04);
    --vp-preview-caption-color: var(--color-gray-01);

    /* ── Code blocks in assistant markdown ───────────────────── */
    --vp-code-block-bg:         #0f1713;           /* deeper than --vp-code-bg for contrast against the white bubble */
    --vp-code-block-fg:         #e8f3ec;
    --vp-code-block-border:     rgba(255, 255, 255, 0.05);
    --vp-code-inline-bg:        var(--vp-code-bg); /* reuse existing inline chip */
    --vp-code-inline-fg:        var(--color-midnight);

    /* ── Scroll-to-bottom fab ────────────────────────────────── */
    --vp-fab-bg:                var(--color-white);
    --vp-fab-border:            var(--color-gray-02);
    --vp-fab-shadow:            0 2px 8px rgba(34, 48, 41, 0.12);
    --vp-fab-shadow-hover:      0 4px 12px rgba(34, 48, 41, 0.18);
    --vp-fab-color:             var(--color-midnight);

    /* ── Token chip row ──────────────────────────────────────── */
    --vp-meta-chip-color:       var(--color-gray-01);
}

.dark,
[data-theme="dark"] {
    --vp-msg-assistant-bg:      color-mix(in srgb, var(--color-midnight) 88%, #000 12%);
    --vp-msg-assistant-border:  rgba(255, 255, 255, 0.08);
    --vp-msg-user-bg:           linear-gradient(160deg, rgba(163, 233, 107, 0.12) 0%, rgba(36, 59, 47, 0.98) 100%);
    --vp-msg-user-border:       rgba(255, 255, 255, 0.08);
    --vp-msg-streaming-border:  rgba(163, 233, 107, 0.55);
    --vp-msg-streaming-ring:    rgba(163, 233, 107, 0.16);
    --vp-msg-shadow:            0 1px 4px rgba(0, 0, 0, 0.35);

    --vp-speaker-color:         var(--color-bright-green);
    --vp-msg-kind-color:        rgba(255, 255, 255, 0.55);
    --vp-msg-body-color:        var(--color-white);

    --vp-composer-fade-from:    rgba(26, 41, 34, 0);
    --vp-composer-fade-mid:     rgba(26, 41, 34, 0.97);
    --vp-composer-fade-to:      rgba(26, 41, 34, 1);

    --vp-suggestion-bg:         rgba(255, 255, 255, 0.03);
    --vp-suggestion-border:     rgba(255, 255, 255, 0.10);
    --vp-suggestion-border-hover: var(--color-bright-green);
    --vp-suggestion-shadow:     0 1px 3px rgba(0, 0, 0, 0.25);
    --vp-suggestion-shadow-hover:
        0 0 0 3px rgba(163, 233, 107, 0.22),
        0 6px 20px rgba(0, 0, 0, 0.35);

    --vp-step-chip-bg:          rgba(255, 255, 255, 0.04);
    --vp-step-chip-border:      rgba(255, 255, 255, 0.10);
    --vp-step-chip-text:        rgba(255, 255, 255, 0.65);
    --vp-step-chip-hover-bg:    rgba(255, 255, 255, 0.08);
    --vp-step-chip-hover-border:rgba(255, 255, 255, 0.18);
    --vp-step-chip-hover-text:  var(--color-white);
    --vp-step-shimmer:          rgba(163, 233, 107, 0.14);
    --vp-step-list-border:      rgba(255, 255, 255, 0.08);
    --vp-step-row-hover:        rgba(255, 255, 255, 0.05);
    --vp-step-detail-bg:        rgba(0, 0, 0, 0.25);
    --vp-step-dot-color:        rgba(255, 255, 255, 0.35);

    --vp-citation-bg:           rgba(255, 255, 255, 0.04);
    --vp-citation-border:       rgba(255, 255, 255, 0.08);
    --vp-citation-num-bg:       var(--color-bright-green);
    --vp-citation-num-color:    var(--color-midnight);
    --vp-citation-link:         var(--color-bright-green);
    --vp-citation-hover-bg:     rgba(163, 233, 107, 0.08);

    --vp-action-btn-color:      rgba(255, 255, 255, 0.55);
    --vp-action-btn-hover-bg:   rgba(255, 255, 255, 0.06);
    --vp-action-btn-hover-color:var(--color-white);

    --vp-typing-dot-color:      rgba(255, 255, 255, 0.35);
    --vp-cursor-color:          var(--color-white);

    --vp-preview-bg:            rgba(255, 255, 255, 0.04);
    --vp-preview-caption-color: rgba(255, 255, 255, 0.55);

    --vp-code-block-bg:         #0a100d;
    --vp-code-block-fg:         #d9ece0;
    --vp-code-block-border:     rgba(255, 255, 255, 0.06);
    --vp-code-inline-bg:        var(--vp-code-bg);
    --vp-code-inline-fg:        var(--color-white);

    --vp-fab-bg:                color-mix(in srgb, var(--color-midnight) 70%, #000 30%);
    --vp-fab-border:            rgba(255, 255, 255, 0.18);
    --vp-fab-shadow:            0 2px 10px rgba(0, 0, 0, 0.45);
    --vp-fab-shadow-hover:      0 4px 14px rgba(0, 0, 0, 0.55);
    --vp-fab-color:             var(--color-white);

    --vp-meta-chip-color:       rgba(255, 255, 255, 0.55);
}

/* Explicit light-mode override block also gets the same tokens so
   nested [data-theme="light"] regions work correctly. */
[data-theme="light"] {
    --vp-msg-assistant-bg:      var(--color-white);
    --vp-msg-assistant-border:  var(--color-gray-03);
    --vp-msg-user-bg:           linear-gradient(160deg, rgba(163, 233, 107, 0.10) 0%, rgba(255, 255, 255, 1) 100%);
    --vp-msg-user-border:       var(--color-gray-03);
    --vp-msg-streaming-border:  rgba(163, 233, 107, 0.45);
    --vp-msg-streaming-ring:    rgba(163, 233, 107, 0.12);
    --vp-msg-shadow:            0 1px 4px rgba(34, 48, 41, 0.04);

    --vp-speaker-color:         var(--color-green);
    --vp-msg-kind-color:        var(--color-gray-01);
    --vp-msg-body-color:        var(--color-midnight);

    --vp-composer-fade-from:    rgba(247, 250, 248, 0);
    --vp-composer-fade-mid:     rgba(247, 250, 248, 0.97);
    --vp-composer-fade-to:      rgba(247, 250, 248, 1);

    --vp-suggestion-bg:         var(--color-white);
    --vp-suggestion-border:     var(--color-gray-03);
    --vp-suggestion-shadow:     0 1px 3px rgba(34, 48, 41, 0.04);

    --vp-step-chip-bg:          var(--color-gray-04);
    --vp-step-chip-border:      var(--color-gray-03);
    --vp-step-chip-text:        var(--color-gray-01);
    --vp-step-chip-hover-bg:    var(--color-gray-03);
    --vp-step-chip-hover-border:var(--color-gray-02);
    --vp-step-chip-hover-text:  var(--color-midnight);
    --vp-step-shimmer:          rgba(163, 233, 107, 0.20);
    --vp-step-list-border:      var(--color-gray-03);
    --vp-step-row-hover:        var(--color-gray-04);
    --vp-step-detail-bg:        var(--color-gray-04);
    --vp-step-dot-color:        var(--color-gray-02);

    --vp-citation-bg:           var(--color-gray-04);
    --vp-citation-border:       var(--color-gray-03);
    --vp-citation-num-bg:       var(--color-midnight);
    --vp-citation-num-color:    var(--color-bright-green);
    --vp-citation-link:         var(--color-green);
    --vp-citation-hover-bg:     color-mix(in srgb, var(--color-bright-green) 10%, var(--color-gray-04));

    --vp-action-btn-color:      var(--color-gray-01);
    --vp-action-btn-hover-bg:   var(--color-gray-04);
    --vp-action-btn-hover-color:var(--color-midnight);

    --vp-typing-dot-color:      var(--color-gray-02);
    --vp-cursor-color:          var(--color-midnight);

    --vp-preview-bg:            var(--color-gray-04);
    --vp-preview-caption-color: var(--color-gray-01);

    --vp-code-block-bg:         #0f1713;
    --vp-code-block-fg:         #e8f3ec;
    --vp-code-block-border:     rgba(255, 255, 255, 0.05);
    --vp-code-inline-bg:        var(--vp-code-bg);
    --vp-code-inline-fg:        var(--color-midnight);

    --vp-fab-bg:                var(--color-white);
    --vp-fab-border:            var(--color-gray-02);
    --vp-fab-shadow:            0 2px 8px rgba(34, 48, 41, 0.12);
    --vp-fab-shadow-hover:      0 4px 12px rgba(34, 48, 41, 0.18);
    --vp-fab-color:             var(--color-midnight);

    --vp-meta-chip-color:       var(--color-gray-01);
}

/* ═══════════════════════════════════════════════════════════════════
   /AI page redesign — additional tokens (mockup: conversation-redesign.html)
   Append-only; no existing tokens changed.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --color-midnight-40:        rgba(34, 48, 41, 0.40);
    --color-midnight-60:        rgba(34, 48, 41, 0.60);
    --color-midnight-80:        rgba(34, 48, 41, 0.80);

    --vp-coral:                 #D97757;
    --vp-welcome-brand-color:   var(--color-midnight);

    --vp-convo-header-color:    var(--color-midnight);
    --vp-convo-header-meta-color: var(--color-gray-01);
    --vp-convo-header-border:   var(--color-gray-03);

    --vp-token-meter-bg:        var(--color-gray-04);
    --vp-token-meter-border:    var(--color-gray-03);
    --vp-token-meter-count:     var(--color-midnight);
    --vp-token-meter-total:     var(--color-gray-01);
    --vp-token-meter-bar-bg:    var(--color-gray-03);
    --vp-token-meter-fill:      var(--color-midnight-80);
    --vp-token-meter-warn:      #d48a3a;
    --vp-token-meter-warn-text: #a8651f;
    --vp-token-meter-danger:    var(--color-red);

    --vp-shortcut-bg:           var(--color-gray-04);
    --vp-shortcut-border:       var(--color-gray-03);
    --vp-shortcut-color:        var(--color-gray-01);

    --vp-attach-item-icon-bg:   var(--color-gray-04);
    --vp-attach-item-icon-color:var(--color-midnight);
    --vp-attach-item-hover-bg:  var(--color-gray-04);
    --vp-attach-header-color:   var(--color-gray-01);
    --vp-attach-sep:            var(--color-gray-03);
    --vp-attach-kbd-color:      var(--color-gray-01);

    --vp-icon-btn-color:        var(--color-gray-01);
    --vp-icon-btn-hover-bg:     var(--color-gray-04);
    --vp-icon-btn-hover-color:  var(--color-midnight);

    --vp-topbar-chip-bg:        var(--color-gray-04);
    --vp-topbar-chip-color:     var(--color-gray-01);
    --vp-topbar-chip-dot:       var(--color-green);

    --vp-bubble-user-bg:        var(--color-mint-50);
    --vp-bubble-user-border:    var(--color-mint);
    --vp-bubble-user-color:     var(--color-midnight);

    --vp-msg-assistant-color:   var(--color-midnight);

    --vp-sug-icon-bg:           var(--color-gray-04);
    --vp-sug-icon-color:        var(--color-midnight);
    --vp-sug-icon-hover-bg:     var(--color-midnight);
    --vp-sug-icon-hover-color:  var(--color-bright-green);
    --vp-sug-mint-bg:           rgba(163, 233, 107, 0.15);
    --vp-sug-mint-color:        var(--color-green);
    --vp-sug-beige-bg:          var(--color-beige-50);
    --vp-sug-beige-color:       #8b6a3f;
    --vp-sug-lilac-bg:          #f2edfe;
    --vp-sug-lilac-color:       #7c5dc7;

    --vp-steps-panel-bg:        var(--color-white);
    --vp-steps-panel-border:    var(--color-gray-03);
    --vp-steps-trigger-color:   var(--color-midnight);
    --vp-steps-trigger-icon:    var(--color-green);
    --vp-steps-trigger-count:   var(--color-gray-01);
    --vp-step-live-bg:          rgba(163, 233, 107, 0.10);
    --vp-step-live-border:      rgba(163, 233, 107, 0.40);
    --vp-step-live-color:       var(--color-midnight);
    --vp-step-live-dot:         var(--color-green);
    --vp-step-live-shimmer:     rgba(255, 255, 255, 0.50);

    --vp-cite-ref-bg:           var(--color-gray-04);
    --vp-cite-ref-color:        var(--color-midnight);
    --vp-cite-ref-hover-bg:     var(--color-bright-green);
    --vp-cite-ref-hover-color:  var(--color-midnight);

    --vp-action-ghost-color:    var(--color-gray-01);
    --vp-action-ghost-hover-bg: var(--color-gray-04);
    --vp-action-ghost-hover-color: var(--color-midnight);
    --vp-action-up-color:       var(--color-green);
    --vp-action-down-color:     var(--color-red);

    --vp-figure-bg:             var(--color-white);
    --vp-figure-border:         var(--color-gray-03);

    --vp-page-surface:          var(--color-gray-04);
    --vp-topbar-bg:             var(--color-white);
    --vp-topbar-border:         var(--color-gray-03);
}

.dark,
[data-theme="dark"] {
    --color-midnight-40:        rgba(255, 255, 255, 0.20);
    --color-midnight-60:        rgba(255, 255, 255, 0.40);
    --color-midnight-80:        rgba(255, 255, 255, 0.70);

    --vp-welcome-brand-color:   var(--color-white);

    --vp-convo-header-color:    var(--color-white);
    --vp-convo-header-meta-color: rgba(255, 255, 255, 0.55);
    --vp-convo-header-border:   rgba(255, 255, 255, 0.10);

    --vp-token-meter-bg:        rgba(255, 255, 255, 0.04);
    --vp-token-meter-border:    rgba(255, 255, 255, 0.10);
    --vp-token-meter-count:     var(--color-white);
    --vp-token-meter-total:     rgba(255, 255, 255, 0.55);
    --vp-token-meter-bar-bg:    rgba(255, 255, 255, 0.10);
    --vp-token-meter-fill:      rgba(255, 255, 255, 0.70);
    --vp-token-meter-warn:      #e0a563;
    --vp-token-meter-warn-text: #f0c38e;

    --vp-shortcut-bg:           rgba(255, 255, 255, 0.04);
    --vp-shortcut-border:       rgba(255, 255, 255, 0.10);
    --vp-shortcut-color:        rgba(255, 255, 255, 0.55);

    --vp-attach-item-icon-bg:   rgba(255, 255, 255, 0.04);
    --vp-attach-item-icon-color:var(--color-white);
    --vp-attach-item-hover-bg:  rgba(255, 255, 255, 0.06);
    --vp-attach-header-color:   rgba(255, 255, 255, 0.55);
    --vp-attach-sep:            rgba(255, 255, 255, 0.10);
    --vp-attach-kbd-color:      rgba(255, 255, 255, 0.55);

    --vp-icon-btn-color:        rgba(255, 255, 255, 0.55);
    --vp-icon-btn-hover-bg:     rgba(255, 255, 255, 0.06);
    --vp-icon-btn-hover-color:  var(--color-white);

    --vp-topbar-chip-bg:        rgba(255, 255, 255, 0.05);
    --vp-topbar-chip-color:     rgba(255, 255, 255, 0.65);

    --vp-bubble-user-bg:        linear-gradient(160deg, rgba(163, 233, 107, 0.12) 0%, rgba(36, 59, 47, 0.98) 100%);
    --vp-bubble-user-border:    rgba(163, 233, 107, 0.25);
    --vp-bubble-user-color:     var(--color-white);

    --vp-msg-assistant-color:   var(--color-white);

    --vp-sug-icon-bg:           rgba(255, 255, 255, 0.04);
    --vp-sug-icon-color:        rgba(255, 255, 255, 0.85);
    --vp-sug-icon-hover-bg:     var(--color-bright-green);
    --vp-sug-icon-hover-color:  var(--color-midnight);
    --vp-sug-mint-bg:           rgba(163, 233, 107, 0.20);
    --vp-sug-mint-color:        var(--color-bright-green);
    --vp-sug-beige-bg:          rgba(241, 233, 226, 0.10);
    --vp-sug-beige-color:       #d4b08a;
    --vp-sug-lilac-bg:          rgba(188, 169, 241, 0.14);
    --vp-sug-lilac-color:       #c9b6f4;

    --vp-steps-panel-bg:        rgba(255, 255, 255, 0.03);
    --vp-steps-panel-border:    rgba(255, 255, 255, 0.08);
    --vp-steps-trigger-color:   var(--color-white);
    --vp-steps-trigger-icon:    var(--color-bright-green);
    --vp-steps-trigger-count:   rgba(255, 255, 255, 0.55);
    --vp-step-live-bg:          rgba(163, 233, 107, 0.12);
    --vp-step-live-border:      rgba(163, 233, 107, 0.40);
    --vp-step-live-color:       var(--color-white);
    --vp-step-live-shimmer:     rgba(255, 255, 255, 0.14);

    --vp-cite-ref-bg:           rgba(255, 255, 255, 0.06);
    --vp-cite-ref-color:        var(--color-white);

    --vp-action-ghost-color:    rgba(255, 255, 255, 0.55);
    --vp-action-ghost-hover-bg: rgba(255, 255, 255, 0.06);
    --vp-action-ghost-hover-color: var(--color-white);
    --vp-action-up-color:       var(--color-bright-green);

    --vp-figure-bg:             rgba(255, 255, 255, 0.04);
    --vp-figure-border:         rgba(255, 255, 255, 0.08);

    --vp-page-surface:          #1a2922;
    --vp-topbar-bg:             color-mix(in srgb, var(--color-midnight) 88%, #000 12%);
    --vp-topbar-border:         rgba(255, 255, 255, 0.08);
}