/* WhoBought design tokens — the sole owner of raw visual constants.
   CSS components consume these variables. Embedded server SVGs read the same variables
   through WhoBought.services.tokens; browser SVGs read them with getComputedStyle. */
:root {
    /* Page and chrome */
    --bg: #FFFFFF;
    --surface: #F7F8FA;
    --surface-strong: #EEF1F6;
    --line: #E8EAF0;
    --control-border: var(--line);
    --ink: #12141F;
    --body: #3A3F51;
    --muted: #6B7183;
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7183' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    --navy: #1B2137;
    /* Display headings use the brand navy, not pure black. */
    --ink-heading: var(--navy);
    --gold: #F5C84C;
    /* Logomark metallic-gradient stops (brand.md §9); literal in favicon.svg + marks.html. */
    --gold-grad-1: #FCE9A0;
    --gold-grad-2: #E6C066;
    --gold-grad-3: #C0912F;
    --gold-hover: #E7B72F;
    --gold-active: #D8A51C;
    --gold-ink: #1A1503;
    /* Active tab-strip and view-toggle controls: approved variant B. */
    --active-chip-bg: var(--gold);
    --active-chip-ink: var(--gold-ink);
    --active-chip-border: var(--gold);
    --link: #2B54D3;
    --buy: #008561;
    --sell: #D50000;
    --delta-up: var(--buy);
    --delta-down: var(--sell);
    --buy-soft: #E4F5EC;
    --sell-soft: #FCEBEC;
    --scroll-cover: rgba(255,255,255,0);
    --scroll-shadow: rgba(18,20,31,0.12);

    /* Chart stage — DATAVIZ_SPEC v2.1 */
    --chart-bg: var(--bg);
    --chart-grid: var(--surface-strong);
    --chart-axis: var(--muted);
    --chart-baseline: #C9CEDB;
    --chart-crosshair: #9AA1B5;
    --chart-hover: rgba(18,20,31,0.05);
    /* Transaction-flag chip: brand navy (was an off-palette #313131 charcoal). */
    --flag-chip-bg: var(--navy);
    --chart-positive: var(--buy);
    --chart-negative: var(--sell);
    --chart-price: #1A52B8;
    --chart-price-wash: rgba(26,82,184,0.12);
    --series-1: var(--chart-price);
    --series-2: #E8A50B;
    --series-3: #8E74DE;
    --series-4: #0895A8;
    --series-5: #C24E86;
    --series-6: #8E2360;
    --series-7: #4FA3E8;
    --series-8: #B44E10;
    --series-other: #8B92A6;
    --heat-3: #2A78D6;
    --heat-5: #104281;
    --buy-wash: rgba(0,133,97,0.10);

    /* Text and marks on the navy chrome. Chart data never uses these. */
    --on-dark-92: rgba(255,255,255,0.92);
    --on-dark-75: rgba(255,255,255,0.75);
    --on-dark-60: rgba(255,255,255,0.60);
    --on-dark-50: rgba(255,255,255,0.50);

    /* Font families, weights, sizes, and line heights */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: "SF Mono", "Fira Code", Menlo, Consolas, monospace;
    --weight-regular: 400;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-heavy: 800;
    --t-hero-s: 44px;
    --t-hero-l: 52px;
    --t-hero-s-m: 32px;
    --t-hero-l-m: 38px;
    --t-h1-s: 32px;
    --t-h1-l: 40px;
    --t-h2-s: 22px;
    --t-h2-l: 30px;
    --t-h3-s: 18px;
    --t-h3-l: 24px;
    --t-investor-name: 20px;
    --t-investor-name-l: 26px;
    --t-body-s: 16px;
    --t-body-l: 24px;
    --t-small-s: 13px;
    --t-small-l: 18px;
    --t-label-s: 12px;
    --t-label-l: 16px;
    --t-stat-s: 28px;
    --t-stat-l: 34px;
    --t-ui: 16px;
    --t-ui-sm: 14px;
    --t-tick: 12px;
    --t-tick-m: 11px;
    --t-mini: 10px;
    /* Binding table type system: header / body / subline = 12 / 14 / 12. */
    --table-header-s: var(--t-label-s);
    --table-header-l: var(--t-label-l);
    --table-cell-s: var(--t-ui-sm);
    --table-cell-l: var(--t-small-l);
    --table-subline-s: var(--t-label-s);
    --table-subline-l: var(--t-label-l);
    --t-stock-h1-s-m: 24px;
    --t-stock-h1-l-m: 30px;
    --line-solid: 1;
    --type-whitespace-zero: 0;
    --line-compact: 1.15;
    --line-dense: 1.35;
    --line-clamp-two: 2;
    --tracking-hero: -0.015em;
    --tracking-h1: -0.01em;
    --tracking-h2: -0.005em;
    --tracking-label: 0.06em;

    /* Spacing, sizes, radii, and elevation */
    --px-1: 1px;
    --px-2: 2px;
    --px-3: 3px;
    --px-4: 4px;
    --px-6: 6px;
    --s-4: 4px;
    --s-8: 8px;
    --s-12: 12px;
    --s-16: 16px;
    --s-20: 20px;
    --s-24: 24px;
    --s-26: 26px;
    --s-32: 32px;
    --s-40: 40px;
    --s-44: 44px;
    --s-48: 48px;
    --s-56: 56px;
    --s-64: 64px;
    --s-72: 72px;
    --s-88: 88px;
    --s-96: 96px;
    --s-120: 120px;
    --s-160: 160px;
    --s-180: 180px;
    --s-190: 190px;
    --s-220: 220px;
    --s-240: 240px;
    --s-320: 320px;
    --s-360: 360px;
    --s-420: 420px;
    --s-520: 520px;
    --s-560: 560px;
    --s-620: 620px;
    --s-640: 640px;
    --s-720: 720px;
    --s-760: 760px;
    --s-840: 840px;
    --radius: 6px;
    --radius-sm: 4px;
    --radius-md: 5px;
    --radius-mark: 4px;
    --radius-pill: 999px;
    --border-w: 1px;
    --focus-ring-w: 2px;
    --shadow: 0 1px 2px rgba(18,20,31,0.05);
    --shadow-hover: 0 4px 14px rgba(18,20,31,0.12);
    --shadow-pop: 0 8px 24px rgba(18,20,31,0.18);
    --maxw: 1120px;
    --pad-card: 20px;
    --header-h: 64px;
    --row-h: 44px;
    --row-h-compact: var(--row-h);
    --holding-row-pad-y: var(--s-8);
    --control-h: 36px;
    --search-w: 420px;
    --filter-search-w: 170px;
    --menu-min-w: 180px;
    --holder-card-min: 216px;
    --chart-tip-w: 320px;
    --position-flag-height: 46px;
    --position-flag-width: 60px;
    --position-flag-pitch: 60px;
    --position-flag-cap: 4px;
    --position-earlier-height: 48px;
    --position-chart-mobile-width: 900px;
    --stock-range-width: var(--s-160);
    --stock-range-track-height: var(--px-6);
    --stock-range-dot-size: var(--s-12);
    --decor-capsule-width: 12px;
    --decor-capsule-up-height: 8px;
    --decor-capsule-down-height: 5px;
    --decor-capsule-baseline-height: 2px;
    --decor-capsule-gap: 1px;
    --button-hover-filter: brightness(0.97);
    --button-active-filter: brightness(0.92);
    --disabled-opacity: 0.46;
    --blur-gate-opacity: 0.62;
    --blur-gate-radius: 4px;
    --motion-fast: 120ms;

    /* Named layout aliases */
    --sect-gap: var(--s-40);
    --sect-gap-min: var(--s-32);
    --sect-gap-max: var(--s-48);
    --sect-title-gap: var(--s-16);
    --table-divider: var(--line);
    --table-primary-link: var(--link);
    --module-gap: var(--s-32);
    --card-gap: var(--s-16);
    --side-pad: var(--s-24);
    --page-pad-top: var(--s-32);
    --page-pad-bottom: var(--s-48);
    --hero-pad-top: var(--s-48);
    --hero-pad-bottom: var(--s-32);
    --footer-gap: var(--s-48);
    --search-input-pad: var(--s-16);
    --chart-h: 420px;
    --chart-h-pos: 280px;
    --stock-chart-h-mobile: 320px;
    --area-chart-h: 220px;
    --cluster-fills-max-h: var(--s-240);

    /* Binding logo geometry */
    --logo-hero: 50px;
    --logo-hero-radius: var(--radius-md);
    --logo-row: 24px;
    --logo-row-radius: var(--radius-sm);
    --logo-card: 32px;
    --logo-card-radius: var(--radius-md);
    --logo-fallback-font: 12px;
    --logo-fallback-font-card: 13px;
    --logo-fallback-font-hero: 20px;

    /* Global chart geometry and mark constants. Unitless values feed Python/JS math. */
    --chart-view-w: 1120;
    --chart-view-h: 420;
    --chart-view-h-position: 280;
    --chart-pad-left: 52;
    --chart-pad-right: 20;
    --chart-price-top-ratio: 0.12;
    --chart-price-bottom-ratio: 0.59;
    --chart-flow-mid-ratio: 0.78;
    --chart-flow-max-ratio: 0.20;
    --chart-position-top-ratio: 0.16;
    --chart-position-bottom-ratio: 0.80;
    --mark-line-width: 2px;
    --mark-capsule-width: 8px;
    --mark-column-width: 16px;
    --mark-size-cap: 52px;
    --mark-end-radius: 4px;
    --mark-surface-gap: 2px;
    --mark-surface-ring: 2px;
    --mark-grid-width: 1px;
    --mark-hit-target: 24px;
    --mark-gradient-stop: 75%;
    --series-opacity: 0.78;

    /* Generated brand assets */
    --og-width: 1200px;
    --og-height: 630px;
    --og-mark: 200px;
    --og-gap: 36px;
    --og-row-gap: 28px;
    --og-word-size: 88px;
    --og-tag-size: 34px;
}

@media (max-width: 900px) {
    :root {
        --chart-h: 350px;
    }
}

@media (max-width: 600px) {
    :root {
        --sect-gap: var(--s-32);
        --module-gap: var(--s-24);
        --side-pad: var(--s-16);
        --page-pad-top: var(--s-24);
        --page-pad-bottom: var(--s-32);
        --hero-pad-top: var(--s-32);
        --hero-pad-bottom: var(--s-24);
        --control-h: var(--s-44);
        --search-input-pad: var(--s-12);
        --chart-h: 260px;
        --area-chart-h: var(--s-180);
    }
}

/* Documented type utilities */
.t-hero { font-size: var(--t-hero-s); line-height: var(--t-hero-l); font-weight: var(--weight-heavy); color: var(--ink-heading); letter-spacing: var(--tracking-hero); }
.t-h1, h1 { font-size: var(--t-h1-s); line-height: var(--t-h1-l); font-weight: var(--weight-heavy); color: var(--ink-heading); letter-spacing: var(--tracking-h1); }
.t-h2, h2 { font-size: var(--t-h2-s); line-height: var(--t-h2-l); font-weight: var(--weight-bold); color: var(--ink-heading); letter-spacing: var(--tracking-h2); }
.t-h3, h3 { font-size: var(--t-h3-s); line-height: var(--t-h3-l); font-weight: var(--weight-semibold); color: var(--ink-heading); }
.t-body { font-size: var(--t-body-s); line-height: var(--t-body-l); font-weight: var(--weight-regular); color: var(--body); }
.t-small { font-size: var(--t-small-s); line-height: var(--t-small-l); font-weight: var(--weight-regular); color: var(--muted); }
.t-label { font-size: var(--t-label-s); line-height: var(--t-label-l); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--muted); }
.t-stat { font-size: var(--t-stat-s); line-height: var(--t-stat-l); font-weight: var(--weight-bold); color: var(--ink); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
    .t-hero { font-size: var(--t-hero-s-m); line-height: var(--t-hero-l-m); }
}

/* Documented spacing utilities */
.mt-4 { margin-top: var(--s-4); }
.mt-8 { margin-top: var(--s-8); }
.mt-12 { margin-top: var(--s-12); }
.mt-16 { margin-top: var(--s-16); }
.mt-24 { margin-top: var(--s-24); }
.mt-32 { margin-top: var(--s-32); }
.mt-48 { margin-top: var(--s-48); }
.mt-64 { margin-top: var(--s-64); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-8 { margin-bottom: var(--s-8); }
.mb-12 { margin-bottom: var(--s-12); }
.mb-16 { margin-bottom: var(--s-16); }
.mb-24 { margin-bottom: var(--s-24); }