/*
 * Visual v2: the "terminal meets Robinhood" style layer (docs/visual-v2.md), the only look since 10-14.
 *
 * Every marketing page loads this file last in <head> (src/scripts/visualLayer.ts), then ONE page-type layer:
 * /assets/visual-v2-entry.css on the entry pages (/, /start, /for-traders*), /assets/visual-v2-site.css on every
 * other page. <html data-visual="v2"> is static markup, so the first paint is already v2. EVERY rule is still scoped
 * under that attribute (visualV2Css.spec.ts fails on one that is not): the scope is what lets a v2 rule beat the
 * page's own equally specific rule, so it stays.
 *
 * What it removes, by the brief's numbering: (1) left-edge accent stripes; (2) all-caps letter-spaced micro labels;
 * (3) pills; (4) the centred giant hero, its green phrase, the CTA glow and the radial gradients; (5) uniform
 * rounded-card grids and Inter. Copy, CTAs, cta_ids, delay labels and disclosures are untouched: this is CSS only,
 * plus data-tone on the proof card's sentiment cell so the DATA can carry the colour.
 *
 * Tokens (dark is the default theme on every entry page; light follows the theme toggle). Contrast in dark, against
 * bg / surface (visualV2Css.spec.ts recomputes these and fails under 4.5:1, in both themes):
 *   --v2-bg       #0a0d0c  page          --v2-text    #edf2ee  17.2 / 16.1
 *   --v2-surface  #111614  raised rows   --v2-muted   #9ba8a1   7.9 / 7.4
 *   --v2-line     #232b28  hairlines     --v2-croc    #3ee08a  11.4 / 10.7  (brand, CTA, "up")
 *   --v2-on-croc  #04130b  CTA text      --v2-down    #ff6166   6.7 / 6.2   ("down")
 *   CTA text on croc green: 11.1. Light theme: every pair stays at or above 5.6.
 */

@font-face {
    font-family: 'CB Display';
    src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
    font-weight: 400 800;
    font-display: swap;
}
@font-face {
    font-family: 'CB Mono';
    src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}

html[data-visual="v2"] {
    --v2-bg: #0a0d0c;
    --v2-surface: #111614;
    --v2-line: #232b28;
    --v2-text: #edf2ee;
    --v2-muted: #9ba8a1;
    --v2-croc: #3ee08a;
    --v2-on-croc: #04130b;
    --v2-down: #ff6166;
    --v2-display: 'CB Display', ui-sans-serif, system-ui, sans-serif;
    --v2-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --v2-mono: 'CB Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --v2-radius: 6px;
    /* The page's own variables, so every rule that already reads them follows the v2 palette. */
    --primary: var(--v2-croc);
    --gradient: var(--v2-croc);
    --gradient-1: var(--v2-croc);
    --gradient-2: var(--v2-croc);
    --text: var(--v2-text);
    --muted: var(--v2-muted);
    --card: var(--v2-surface);
    --line: var(--v2-line);
}
html[data-visual="v2"]:not(.dark) {
    --v2-bg: #f6f7f4;
    --v2-surface: #ffffff;
    --v2-line: #dfe3dd;
    --v2-text: #0e1411;
    --v2-muted: #4d5a53;
    --v2-croc: #00703f;
    --v2-on-croc: #ffffff;
    --v2-down: #c4161c;
}

/* ── Base: body type, tabular figures, flat surfaces ─────────────────────────────────────────── */
html[data-visual="v2"] body {
    font-family: var(--v2-body);
    background: var(--v2-bg);
    color: var(--v2-text);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}
html[data-visual="v2"] .bg-glow,
html[data-visual="v2"]:not(.dark) .bg-glow { background: var(--v2-bg); }
html[data-visual="v2"] .bg-glow::before,
html[data-visual="v2"] .bg-glow::after,
html[data-visual="v2"] .final-cta::before { display: none; }
html[data-visual="v2"] .hero,
html[data-visual="v2"] .hero-title,
html[data-visual="v2"] .hero-subtitle,
html[data-visual="v2"] .hero-buttons,
html[data-visual="v2"] .hero-trust,
html[data-visual="v2"] .hero-screenshot { animation: none; }
html[data-visual="v2"] h1,
html[data-visual="v2"] h2,
html[data-visual="v2"] h3,
html[data-visual="v2"] .section-title,
html[data-visual="v2"] .final-cta-title,
html[data-visual="v2"] .pricing-price,
html[data-visual="v2"] .value-panel-price {
    font-family: var(--v2-display);
    font-optical-sizing: auto;
    letter-spacing: -0.02em;
    color: var(--v2-text);
}

/* ── (2) No all-caps micro labels: sentence case, normal tracking. Table <th> keeps its caps. ── */
html[data-visual="v2"] .asset-bar-item,
html[data-visual="v2"] .value-panel-founding,
html[data-visual="v2"] .beginner-sample-kicker,
html[data-visual="v2"] .resource-card-kicker,
html[data-visual="v2"] .sample-kicker,
html[data-visual="v2"] .proof-kicker,
html[data-visual="v2"] .sample-fields dt,
html[data-visual="v2"] .proof-fields dt {
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--v2-body);
}

/* ── Buttons: flat croc green, small radius, no glow, no lift ─────────────────────────────────── */
html[data-visual="v2"] .btn-primary,
html[data-visual="v2"] .cta-button,
html[data-visual="v2"] .start-sticky-cta,
html[data-visual="v2"].dark .cta-button {
    background: var(--v2-croc);
    color: var(--v2-on-croc);
    border-radius: var(--v2-radius);
    box-shadow: none;
    font-weight: 700;
    letter-spacing: -0.005em;
}
html[data-visual="v2"] .btn-primary:hover,
html[data-visual="v2"] .cta-button:hover,
html[data-visual="v2"].dark .cta-button:hover { transform: none; box-shadow: none; filter: brightness(1.08); }
/* The ring must be at full strength the moment the button takes focus (#4810, WCAG 2.4.7 / 1.4.11). The home hero's
   .btn-primary carries `transition: all 0.2s`, which also faded the outline in from the browser default in the
   button's own dark text colour (#04130b on #0a0d0c, 1.03:1): the outline is left out of the transition here. */
html[data-visual="v2"] .btn-primary:focus-visible,
html[data-visual="v2"] .cta-button:focus-visible {
    outline: 2px solid var(--v2-text);
    outline-offset: 2px;
    transition-property: transform, box-shadow, filter, background-color, color, border-color;
}
html[data-visual="v2"] .btn-secondary {
    border-radius: var(--v2-radius);
    border: 1px solid var(--v2-line);
    color: var(--v2-text);
}

/* ── Nav: flat bar, hairline under it, the croc a little brighter ─────────────────────────────── */
html[data-visual="v2"] .navbar,
html[data-visual="v2"].dark .navbar,
html[data-visual="v2"] .navbar.scrolled,
html[data-visual="v2"].dark .navbar.scrolled {
    background: var(--v2-bg);
    backdrop-filter: none;
    box-shadow: none;
    border-bottom: 1px solid var(--v2-line);
}
html[data-visual="v2"].dark .logo img,
html[data-visual="v2"].dark .top img { filter: brightness(1.55) saturate(1.25); }
html[data-visual="v2"] .nav-link { font-weight: 500; }
html[data-visual="v2"].dark .nav-link,
html[data-visual="v2"].dark .nav-dropdown-button { color: var(--v2-muted); }
html[data-visual="v2"].dark .nav-link:hover,
html[data-visual="v2"].dark .nav-dropdown-button:hover { color: var(--v2-text); }
html[data-visual="v2"] .theme-toggle,
html[data-visual="v2"] .nav-menu-toggle { border-radius: var(--v2-radius); border-color: var(--v2-line); }

/* The nav in the light theme and its menus (navbar.css): the same tokens, so an open dropdown or the phone menu shows
   no v1 surface. Added 10-14, when v2 became the only look. */
html[data-visual="v2"]:not(.dark) .nav-link { color: var(--v2-muted); }
html[data-visual="v2"]:not(.dark) .nav-link:hover { color: var(--v2-text); }
html[data-visual="v2"] .nav-dropdown-menu,
html[data-visual="v2"] .nav-mobile-menu {
    background: var(--v2-surface);
    border-color: var(--v2-line);
    border-radius: var(--v2-radius);
    box-shadow: none;
}
html[data-visual="v2"] .nav-dropdown-menu .nav-dropdown-page,
html[data-visual="v2"] .nav-dropdown-symbols .nav-dropdown-symbol,
html[data-visual="v2"] .nav-mobile-link,
html[data-visual="v2"] .nav-menu-toggle { color: var(--v2-text); }
html[data-visual="v2"] .nav-dropdown-menu .nav-dropdown-page:hover,
html[data-visual="v2"] .nav-dropdown-symbols .nav-dropdown-symbol:hover { background: var(--v2-bg); color: var(--v2-croc); }
html[data-visual="v2"] .nav-dropdown-label,
html[data-visual="v2"] .nav-mobile-sub .nav-dropdown-page,
html[data-visual="v2"] .nav-mobile-sub .nav-mobile-sublink,
html[data-visual="v2"] .nav-mobile-sub .nav-dropdown-symbol { color: var(--v2-muted); }
html[data-visual="v2"] .nav-dropdown-label { text-transform: none; letter-spacing: 0; }

/* ── Links in body copy, on every page (10-14): the accent green, never the browser's blue or visited purple. Only
   links without a class of their own: buttons, the nav, cards and footer links keep their styles. ── */
html[data-visual="v2"] :is(p, li, dd, td, th, figcaption, blockquote, small, label, summary, .feature-description) a:not([class]),
html[data-visual="v2"] :is(p, li, dd, td, th, figcaption, blockquote, small, label, summary, .feature-description) a:not([class]):visited {
    color: var(--v2-croc);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
html[data-visual="v2"] :is(p, li, dd, td, th, figcaption, blockquote, small, label, summary, .feature-description) a:not([class]):hover {
    filter: brightness(1.15);
    text-decoration-thickness: 2px;
}
html[data-visual="v2"] a:not([class]):focus-visible {
    outline: 2px solid var(--v2-croc);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The skip link (#4810), on every page: croc green with its own contrasting text, in both themes. */
html[data-visual="v2"] .skip-link,
html[data-visual="v2"]:not(.dark) .skip-link {
    background: var(--v2-croc);
    color: var(--v2-on-croc);
    border-radius: var(--v2-radius);
}