/**
 * MSL Stocks — Kit Design Token Overrides
 * Migrates Tailwind-era colors/sizes to msl-kit.css tokens.
 * Loaded AFTER stocks.css + renderer.css so specificity wins.
 * 2026-05-28
 */

/* ── Token remapping ─────────────────────────────────────── */
:root {
    /* Brand — map old tokens to Kit values */
    --msl-primary:      var(--msl-navy);           /* was #10b981 emerald */
    --msl-primary-dark: var(--msl-navy-2);         /* was #059669 */

    /* Gray scale — map Tailwind grays to Kit ink tokens */
    --msl-gray-50:  var(--msl-cream);              /* was #f9fafb */
    --msl-gray-100: var(--msl-cream-2);            /* was #f3f4f6 */
    --msl-gray-200: rgba(6,20,43,.12);             /* --msl-line */
    --msl-gray-500: var(--msl-muted);              /* was #6b7280 */
    --msl-gray-600: var(--msl-ink);                /* was #4b5563 */
    --msl-gray-700: var(--msl-ink);                /* was #374151 */
    --msl-gray-800: var(--msl-ink-strong);         /* was #1f2937 */
    --msl-gray-900: var(--msl-ink-strong);         /* was #111827 */
}

/* ── Font family — enforce Heebo everywhere ──────────────── */
.msl-stock-page,
.msl-stock-search-landing,
.msl-stock-preloader {
    font-family: var(--msl-font);
}

/* ── Body text — 13→17px, correct line-height ────────────── */
.msl-stock-page .msl-section__content {
    font-size: var(--msl-size-body);          /* 17px */
    line-height: var(--msl-lh-normal);        /* 1.65 */
    color: var(--msl-ink);
}

.msl-stock-page .msl-section__content p {
    font-size: inherit;
    color: inherit;
}

.msl-stock-page .msl-section__content strong {
    color: var(--msl-ink-strong);
}

/* ── Section titles — Kit sizing ─────────────────────────── */
.msl-stock-page .msl-section__title {
    font-size: var(--msl-size-h4);            /* 18px */
    font-weight: var(--msl-w-bold);           /* 700 */
    color: var(--msl-ink-strong);
}

/* Section title accent bar — amber instead of emerald */
.msl-stock-page .msl-section__title::before {
    background: var(--msl-amber);
}

/* ── KPI cards — Kit tokens ──────────────────────────────── */
.msl-stock-page .msl-kpi-card {
    background: #fff;
    border-color: var(--msl-line);
}

.msl-stock-page .msl-kpi-card__label {
    font-size: var(--msl-size-tiny);          /* 12px OK */
    color: var(--msl-muted);
    font-weight: var(--msl-w-mid);            /* 500 */
    letter-spacing: var(--msl-ls-label);
}

.msl-stock-page .msl-kpi-card__value {
    font-size: var(--msl-size-num);           /* 40px → 2.5rem */
    font-weight: var(--msl-w-black);          /* 900 */
    color: var(--msl-ink-strong);
}

/* Price card — Kit up-green not Tailwind emerald */
.msl-stock-page .msl-kpi-card--price .msl-kpi-card__value {
    color: var(--msl-up);                     /* #3b8a4f */
}

.msl-stock-page .msl-kpi-card__upside {
    color: var(--msl-up);
}

/* Rating label — amber instead of emerald */
.msl-stock-page .msl-kpi-card__rating-label {
    color: var(--msl-amber-deep);
    background: var(--msl-amber-soft);
}

/* Change indicator */
.msl-stock-page .msl-kpi-card__change.positive {
    color: var(--msl-up);
    background: var(--msl-up-soft);
}

.msl-stock-page .msl-kpi-card__change.negative {
    color: var(--msl-down);
    background: var(--msl-down-soft);
}

/* ── CTA box — navy/amber gradient ──────────────────────── */
.msl-cta-box {
    background: linear-gradient(135deg, var(--msl-navy) 0%, var(--msl-navy-2) 100%);
    border-radius: 14px;
}

.msl-cta-box__message {
    font-size: var(--msl-size-body);
}

.msl-cta-box__btn {
    font-family: var(--msl-font);
    font-size: var(--msl-size-body);
    font-weight: var(--msl-w-bold);
    border-radius: 8px;
}

.msl-cta-box__btn--primary {
    background: var(--msl-amber);
    color: var(--msl-navy);
}

.msl-cta-box__btn--primary:hover {
    background: var(--msl-amber-deep);
}

.msl-cta-box__btn--secondary {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
}

.msl-cta-box__btn--secondary:hover {
    background: rgba(255,255,255,0.2);
}

/* ── Analyst section — Kit colors ────────────────────────── */
.msl-stock-page .msl-analyst-card__title {
    color: var(--msl-ink-strong);
    font-weight: var(--msl-w-bold);
}

.msl-stock-page .msl-analyst-card__score-section {
    background: var(--msl-cream);
}

.msl-stock-page .msl-analyst-card__score-big {
    color: var(--msl-up);
}

.msl-stock-page .msl-analyst-card__score-label {
    color: var(--msl-up);
}

.msl-stock-page .msl-analyst-card__score-count {
    color: var(--msl-muted);
}

.msl-stock-page .msl-analyst-card__dist-label {
    color: var(--msl-muted);
}

.msl-stock-page .msl-analyst-card__target-label {
    color: var(--msl-muted);
}

.msl-stock-page .msl-analyst-card__target-value {
    color: var(--msl-ink-strong);
}

.msl-stock-page .msl-analyst-card__target-value.highlight {
    color: var(--msl-up);
}

/* ── Stock header — Kit tokens ───────────────────────────── */
.msl-stock-header {
    background: linear-gradient(180deg, var(--msl-cream) 0%, #fff 100%);
    border-color: var(--msl-line);
}

.msl-stock-header__title {
    color: var(--msl-ink-strong);
    font-weight: var(--msl-w-heavy);
}

.msl-stock-header__symbol {
    color: var(--msl-muted);
}

.msl-stock-header__exchange {
    background: var(--msl-cream-2);
    color: var(--msl-ink);
}

.msl-stock-header__logo-placeholder {
    background: linear-gradient(135deg, var(--msl-navy) 0%, var(--msl-navy-2) 100%);
    box-shadow: 0 2px 12px rgba(6, 20, 43, 0.2);
}

/* ── Search bar — Kit accent colors ──────────────────────── */
.msl-stock-search-bar__input:focus {
    border-color: var(--msl-amber);
    box-shadow: 0 0 0 3px rgba(212, 160, 74, 0.15);
}

.msl-stock-search-bar__tag:hover {
    background: var(--msl-navy);
    color: #fff;
}

.msl-stock-search-bar__popular-label {
    color: var(--msl-muted);
    font-size: var(--msl-size-meta);
}

/* ── Search header hover ─────────────────────────────────── */
.msl-stock-header__search:hover {
    border-color: var(--msl-amber);
    box-shadow: 0 2px 8px rgba(212, 160, 74, 0.15);
}

/* ── Error page — Kit colors ─────────────────────────────── */
.msl-stock-error__btn--primary {
    background: var(--msl-navy);
    color: #fff;
}

.msl-stock-error__btn--primary:hover {
    background: var(--msl-navy-2);
}

/* ── Notice banners — Kit semantic colors ────────────────── */
.msl-notice-warning {
    background: var(--msl-warn-bg);
    border-color: var(--msl-amber-soft);
    color: var(--msl-warn);
}

/* ── Disclaimer — Kit tokens ─────────────────────────────── */
.msl-stock-disclaimer {
    background: var(--msl-cream);
    border-color: var(--msl-line);
    color: var(--msl-muted);
    font-size: var(--msl-size-tiny);
}

/* ── TradingView section — Kit tokens ────────────────────── */
.msl-stock-page .msl-widget--tradingview_embed {
    border-color: var(--msl-line);
}

.msl-stock-page .msl-tradingview-container h3,
.msl-stock-page .msl-widget--tradingview_embed > h3 {
    color: var(--msl-ink);
    background: var(--msl-cream);
    border-color: var(--msl-line);
    font-weight: var(--msl-w-bold);
}

/* ── Building state / preloader — Kit colors ─────────────── */
.msl-building__icon {
    color: var(--msl-navy);
}

.msl-building__title {
    color: var(--msl-ink-strong);
}

.msl-building__spinner {
    border-color: var(--msl-cream-2);
    border-top-color: var(--msl-navy);
}

.msl-building__retry {
    color: var(--msl-navy);
}

.msl-building__retry:hover {
    color: var(--msl-navy-2);
}

.msl-stock-preloader {
    background: linear-gradient(180deg, var(--msl-cream) 0%, var(--msl-cream-2) 100%);
}

.msl-stock-preloader__icon {
    color: var(--msl-navy);
}

.msl-stock-preloader__title {
    color: var(--msl-navy);
}

.msl-stock-preloader__spinner {
    border-color: var(--msl-cream-2);
    border-top-color: var(--msl-navy);
}

/* ── Search landing — Kit colors ─────────────────────────── */
.msl-stock-search-landing__icon {
    color: var(--msl-navy);
}

.msl-stock-search-landing__title {
    color: var(--msl-navy);
}

.msl-stock-search-landing__input-wrap:focus-within {
    border-color: var(--msl-amber);
    box-shadow: 0 0 0 4px rgba(212, 160, 74, 0.1);
}

.msl-stock-search-landing__btn {
    background: var(--msl-navy);
}

.msl-stock-search-landing__btn:hover {
    background: var(--msl-navy-2);
}

/* ── Hero search — Kit colors ────────────────────────────── */
.msl-hero-search__input:focus {
    border-color: var(--msl-navy);
}

.msl-hero-search__btn {
    background: var(--msl-navy);
    border-color: var(--msl-navy);
}

.msl-hero-search__btn:hover {
    background: var(--msl-navy-2);
    border-color: var(--msl-navy-2);
}

.msl-hero-search__dropdown-item:hover,
.msl-hero-search__dropdown-item--active {
    background: var(--msl-cream);
}

.msl-hero-search__dropdown-item strong {
    color: var(--msl-navy);
}

.msl-hero-search__popular-link {
    color: var(--msl-navy);
}

.msl-hero-search__popular-link:hover {
    background: var(--msl-cream-2);
}

/* ── Generated-at badge ──────────────────────────────────── */
.msl-stock-generated-at {
    font-size: var(--msl-size-meta);
    color: var(--msl-muted);
}

/* ── Responsive KPI fix ──────────────────────────────────── */
@media (max-width: 768px) {
    .msl-stock-page .msl-kpi-card__value {
        font-size: var(--msl-size-h2);        /* 36px on mobile */
    }
}