/* ============================================================
   TI-84 Calculator Online — Light theme
   ------------------------------------------------------------
   Loaded on every page after style.css / pages.css. Every rule
   here is scoped with html[data-theme="light"], so it only applies
   in light mode and always beats the page's own dark rule (the
   extra attribute selector adds specificity).

   The palette lives in the first block. Everything after it fixes
   components that hard-code a dark-only colour in their own
   stylesheet (blog posts carry their own inline CSS).
   ============================================================ */

html[data-theme="light"] {
    color-scheme: light;

    /* Surfaces */
    --bg-primary: #f4f7fd;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-glass: rgba(15, 23, 60, 0.03);
    --border-glass: rgba(15, 23, 60, 0.10);

    /* Accents — darkened so text keeps its contrast on white */
    --accent-blue: #2f5bd8;
    --accent-cyan: #0b6e99;
    --accent-purple: #7c3aed;
    --accent-gradient: linear-gradient(135deg, #1d4ed8 0%, #0b6e99 50%, #7c3aed 100%);

    /* Text */
    --text-primary: #0e1730;
    --text-secondary: #3f4c68;
    --text-muted: #5f6b86;

    /* Shadows */
    --shadow-glow: 0 0 40px rgba(47, 91, 216, 0.10);
    --shadow-card: 0 8px 28px rgba(15, 23, 60, 0.10);
    --shadow-header: 0 4px 24px rgba(15, 23, 60, 0.08);
    --shadow-inset-soft: 0 4px 12px rgba(15, 23, 60, 0.10);

    /* Component tokens */
    --header-bg: rgba(255, 255, 255, 0.92);
    --menu-bg: rgba(255, 255, 255, 0.98);
    --panel-bg: rgba(255, 255, 255, 0.94);
    --panel-bg-soft: #ffffff;
    --panel-bg-strong: #ffffff;
    --surface-inset: rgba(15, 23, 60, 0.04);
    --surface-inset-strong: rgba(15, 23, 60, 0.07);
    --subtle-bg: rgba(15, 23, 60, 0.04);
    --subtle-bg-hover: rgba(15, 23, 60, 0.08);
    --row-hover-bg: rgba(15, 23, 60, 0.03);
    --border-subtle: rgba(15, 23, 60, 0.08);
    --border-soft: rgba(15, 23, 60, 0.20);
    --field-bg: #ffffff;
    --field-bg-focus: #ffffff;
    --field-border: rgba(15, 23, 60, 0.22);
    --field-text: #0e1730;
    --field-placeholder: rgba(15, 23, 60, 0.45);
    --btn-ink-bg: #12203c;
    --btn-ink-fg: #ffffff;
    --on-accent: #ffffff;
    --ring-strong: #12203c;
    --ring-glow: rgba(15, 23, 60, 0.25);
    --code-bg: rgba(15, 23, 60, 0.05);
    --figure-caption-bg: rgba(15, 23, 60, 0.05);
    --scrim: rgba(15, 23, 60, 0.45);
    --decor-dot: rgba(15, 23, 60, 0.08);
    --footer-logo-fg: #0e1730;
    --success: #047857;
    --warning: #b45309;
    --danger: #b91c1c;

    /* Legacy names the vendored TI-30XS page still uses. */
    --bg-primary-old: #f4f7fd;
    --glass-bg: rgba(15, 23, 60, 0.04);
    --glass-border: rgba(15, 23, 60, 0.10);
    --glow-primary: rgba(47, 91, 216, 0.15);
    --accent-primary: #4f46e5;
    --accent-secondary: #dc2626;
}

/* ---------- Header, menus, calculator chrome ---------- */
html[data-theme="light"] .logo-area .site-name,
html[data-theme="light"] .footer-logo span {
    background: none;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}

html[data-theme="light"] .color-swatch {
    box-shadow: inset 0 2px 4px rgba(15, 23, 60, 0.18), 0 2px 8px rgba(15, 23, 60, 0.12);
}

html[data-theme="light"] .calc-top-controls {
    background: var(--panel-bg);
    border-color: rgba(47, 91, 216, 0.30);
    box-shadow: 0 6px 20px rgba(15, 23, 60, 0.10);
}

html[data-theme="light"] .zoom-level,
html[data-theme="light"] .color-picker + .control-divider {
    color: var(--text-primary);
}

/* ---------- Buttons that were white-on-dark ---------- */
html[data-theme="light"] .copy-btn {
    color: var(--text-primary);
}

html[data-theme="light"] .embed-trigger-btn {
    border-color: rgba(47, 91, 216, 0.35);
}

html[data-theme="light"] .embed-trigger-btn:hover {
    background: rgba(47, 91, 216, 0.14);
}

/* ---------- Blog cards and article chrome ---------- */
html[data-theme="light"] .blog-card:hover {
    box-shadow: 0 20px 40px rgba(15, 23, 60, 0.12);
}

html[data-theme="light"] .cat-btn {
    background: var(--subtle-bg);
    border-color: var(--border-soft);
    color: var(--text-secondary);
}

html[data-theme="light"] .cat-btn:hover,
html[data-theme="light"] .cat-btn.active {
    background: rgba(47, 91, 216, 0.12);
    border-color: rgba(47, 91, 216, 0.45);
    color: var(--accent-blue);
}

html[data-theme="light"] .blog-card-img,
html[data-theme="light"] .blog-card-img-placeholder {
    background: linear-gradient(135deg, rgba(47, 91, 216, 0.12), rgba(11, 110, 153, 0.10));
}

html[data-theme="light"] .article-hero-img {
    box-shadow: 0 16px 40px rgba(15, 23, 60, 0.14);
}

html[data-theme="light"] .quick-answer strong {
    color: var(--accent-cyan);
}

html[data-theme="light"] .article-img-wrap figcaption {
    background: var(--figure-caption-bg);
    color: var(--text-secondary);
}

html[data-theme="light"] .data-table tbody tr:hover td,
html[data-theme="light"] .faq-question:hover {
    background: var(--row-hover-bg);
}

html[data-theme="light"] .data-table .allowed,
html[data-theme="light"] .data-table .kept,
html[data-theme="light"] .badge-safe {
    color: var(--success);
}

html[data-theme="light"] .data-table .not-allowed,
html[data-theme="light"] .data-table .deleted,
html[data-theme="light"] .badge-nuclear {
    color: var(--danger);
}

html[data-theme="light"] .badge-moderate {
    color: var(--warning);
}

html[data-theme="light"] .author-box,
html[data-theme="light"] .toc-sidebar-card {
    background: var(--bg-card);
    border-color: var(--border-glass);
}

html[data-theme="light"] .author-role,
html[data-theme="light"] .meta-item {
    color: var(--accent-cyan);
}

/* ---------- Graphing calculator page ---------- */
html[data-theme="light"] .graph-panel {
    background: var(--bg-card);
    border-color: var(--border-glass);
    box-shadow: var(--shadow-card);
}

html[data-theme="light"] .graph-head {
    background: var(--surface-inset);
    border-bottom-color: var(--border-glass);
}

html[data-theme="light"] .graph-head h2 {
    color: var(--text-primary);
}

html[data-theme="light"] .ghost-btn {
    border-color: var(--border-soft);
    color: var(--text-primary);
}

html[data-theme="light"] .ghost-btn:hover {
    background: var(--subtle-bg-hover);
    border-color: var(--accent-blue);
}

html[data-theme="light"] body.css-fullscreen .graph-panel {
    background: var(--bg-secondary);
}

/* Desmos ships its "powered by" credit at 20% black, which all but vanishes on
   a white panel. The attribution has to stay readable (Phase 1 removed the rule
   that hid it), so light mode gives it a solid ink. */
html[data-theme="light"] .dcg-powered-by {
    color: rgba(15, 23, 60, 0.72) !important;
}

/* Author profiles with nothing to point at show a "No public profiles listed"
   placeholder. Its inline `opacity: .75` cannot be beaten from a stylesheet
   without !important, and at 75% the cyan ink lands at 3.17:1 on the pill
   background. Light mode keeps the muted look, but with a darker ink. */
html[data-theme="light"] .author-links a[style*="opacity"] {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
}

/* ---------- PDF manual page ---------- */
html[data-theme="light"] .pdf-viewer-container {
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
}

html[data-theme="light"] .calc-viewer-container {
    background: var(--bg-secondary);
    box-shadow: var(--shadow-card);
}

html[data-theme="light"] .promo-title {
    color: var(--text-primary);
}

html[data-theme="light"] .download-btn {
    background: rgba(47, 91, 216, 0.10);
    border-color: rgba(47, 91, 216, 0.35);
    color: var(--accent-blue) !important;
}

html[data-theme="light"] .download-btn:hover {
    background: rgba(47, 91, 216, 0.18);
    border-color: var(--accent-blue);
    color: var(--accent-blue) !important;
}

html[data-theme="light"] .info-card {
    background: var(--surface-inset);
}

/* ---------- 404 ---------- */
html[data-theme="light"] .error-title {
    color: var(--text-primary);
}

html[data-theme="light"] .btn-secondary {
    background: var(--subtle-bg);
    border-color: var(--border-soft);
    color: var(--text-primary);
}

html[data-theme="light"] .btn-secondary:hover {
    background: var(--subtle-bg-hover);
    color: var(--text-primary);
}

html[data-theme="light"] .floating-math {
    color: var(--decor-dot);
}

/* ---------- Home page ---------- */
/* The hero heading is solid ink in both themes: white on dark, black here. */
html[data-theme="light"] .hero-header-content h1 {
    color: #000000;
}

/* ---------- TI-30XS page (vendored calculator, our own chrome) ---------- */
html[data-theme="light"] .hero-section h1 {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

html[data-theme="light"] .faq-question:hover {
    background: var(--row-hover-bg);
}

html[data-theme="light"] .footer-bottom .footer-links a:hover {
    color: var(--text-primary);
}

html[data-theme="light"] .color-swatch:hover,
html[data-theme="light"] .color-swatch.active {
    border-color: var(--ring-strong);
    box-shadow: 0 0 0 3px var(--ring-glow);
}

html[data-theme="light"] .control-divider {
    background: rgba(15, 23, 60, 0.18);
}

html[data-theme="light"] .zoom-btn {
    background: var(--subtle-bg);
    border-color: var(--border-soft);
}

html[data-theme="light"] .zoom-btn:hover {
    color: var(--on-accent);
}

html[data-theme="light"] .also-available-banner .btn-cta {
    background: var(--btn-ink-bg);
    color: var(--btn-ink-fg) !important;
}

/* ============================================================
   Page-specific fixes
   ------------------------------------------------------------
   A handful of components hard-code a dark-only colour in their own
   stylesheet. Every selector below is scoped with html[data-theme="light"],
   which outranks the page's own rule (one extra class + the attribute) so the
   dark theme files stay untouched.
   ============================================================ */

/* ---------- Blog articles ---------- */
html[data-theme="light"] .quick-answer {
    background: linear-gradient(135deg, rgba(47, 91, 216, 0.09), rgba(11, 110, 153, 0.07));
    border-color: rgba(47, 91, 216, 0.32);
}

html[data-theme="light"] .article-tag,
html[data-theme="light"] .blog-card-tag {
    background: rgba(47, 91, 216, 0.10);
    border-color: rgba(47, 91, 216, 0.30);
    color: var(--accent-cyan);
}

/* Key caps sit inside tinted info/warn boxes, so the label needs a deeper ink
   than the accent blue to clear 4.5:1 against that tint. */
html[data-theme="light"] .key,
html[data-theme="light"] .key-tag {
    background: rgba(47, 91, 216, 0.10);
    border-color: rgba(47, 91, 216, 0.32);
    color: #1e3a8a;
}

/* The emulated calculator screens stay dark in both themes - that is what the
   hardware looks like. On a light page the translucent version would wash out
   to mid grey, so they get the solid LCD colour instead, and their secondary
   ink has to stay light too. */
html[data-theme="light"] .result-display {
    background: #0a0d1f;
    border-color: rgba(47, 91, 216, 0.45);
}

html[data-theme="light"] .calc-display .comment,
html[data-theme="light"] .result-display .result-label {
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="light"] .info-box {
    background: rgba(47, 91, 216, 0.08);
    border-color: rgba(47, 91, 216, 0.28);
}

html[data-theme="light"] .warn-box {
    background: rgba(180, 83, 9, 0.08);
    border-color: rgba(180, 83, 9, 0.30);
}

html[data-theme="light"] .success-box {
    background: rgba(4, 120, 87, 0.08);
    border-color: rgba(4, 120, 87, 0.30);
}

html[data-theme="light"] .danger-box {
    background: rgba(185, 28, 28, 0.08);
    border-color: rgba(185, 28, 28, 0.30);
}

html[data-theme="light"] .data-table th {
    background: rgba(47, 91, 216, 0.10);
}

html[data-theme="light"] .reset-card:hover {
    box-shadow: 0 12px 28px rgba(15, 23, 60, 0.12);
}

html[data-theme="light"] .reset-card.green::before { background: linear-gradient(90deg, #059669, #047857); }
html[data-theme="light"] .reset-card.yellow::before { background: linear-gradient(90deg, #d97706, #b45309); }
html[data-theme="light"] .reset-card.red::before { background: linear-gradient(90deg, #dc2626, #b91c1c); }

html[data-theme="light"] .toc-sidebar-links li a:hover {
    background: rgba(47, 91, 216, 0.10);
}

/* Screenshots of the emulator are dark images. A hairline border keeps them
   from looking like they are floating on the white page. */
html[data-theme="light"] .article-img-wrap img,
html[data-theme="light"] .blog-card-img img {
    border-bottom: 1px solid var(--border-glass);
}

/* ---------- 404 ---------- */
html[data-theme="light"] .error-code {
    background: linear-gradient(135deg, #1d4ed8, #0b6e99);
    text-shadow: 0 10px 30px rgba(29, 78, 216, 0.25);
}

/* ---------- Chrome extension blocks (restored when the listing is live) ---------- */
html[data-theme="light"] .nav-ext-btn {
    color: var(--accent-cyan) !important;
    border-color: rgba(11, 110, 153, 0.45);
    background: linear-gradient(135deg, rgba(47, 91, 216, 0.12), rgba(11, 110, 153, 0.12));
}

html[data-theme="light"] .mobile-ext-btn {
    color: var(--accent-cyan) !important;
}

html[data-theme="light"] .hero-ext-alert {
    background: var(--panel-bg);
    color: var(--text-secondary);
}

html[data-theme="light"] .hero-ext-alert .ext-text strong {
    color: var(--text-primary);
}

html[data-theme="light"] .hero-ext-alert .ext-icon,
html[data-theme="light"] .hero-ext-alert .ext-cta {
    color: var(--accent-purple);
}

/* ---------- The theme toggle button ---------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--subtle-bg);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    height: 38px;
    padding: 0 14px;
    border-radius: 50px;
    cursor: pointer;
    font-family: var(--font-body) !important;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.theme-toggle:hover {
    background: var(--subtle-bg-hover);
    border-color: var(--accent-blue);
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.theme-toggle .theme-toggle-label {
    white-space: nowrap;
}

/* Icon swap: the button shows the theme you would switch TO (the label next
   to it says the same thing). Decided in CSS so it cannot flash. */
[data-theme-toggle] .icon-sun { display: block; }
[data-theme-toggle] .icon-moon { display: none; }

html[data-theme="light"] [data-theme-toggle] .icon-sun { display: none; }
html[data-theme="light"] [data-theme-toggle] .icon-moon { display: block; }

@media (max-width: 768px) {
    .theme-toggle .theme-toggle-label { display: none; }
    /* Sit next to the hamburger instead of floating in the middle of the bar. */
    .theme-toggle {
        padding: 0 12px;
        margin-left: auto;
        margin-right: 4px;
    }
}

/* The mobile menu entry is a full-width row, matching the other links. */
.mobile-menu .theme-toggle-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    border-top: 1px solid var(--border-glass);
    color: var(--text-primary);
    font-family: var(--font-body) !important;
    font-size: 1rem;
    font-weight: 500;
    padding: 16px 20px;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.mobile-menu .theme-toggle-mobile svg {
    width: 18px;
    height: 18px;
}