/* ============================================================
   THEME OVERRIDE v4.0 — COMPLETE FIX

   Fixes THREE issues:
   1. 12 undefined CSS variables (--ok-red, --ok-card-bg, etc.)
   2. Hero text fading (generic p !important was overriding hero white text)
   3. Proof strip "Trusted by creators worldwide" misalignment

   Dark  = Tungsten warm charcoal #121214 (set-lighting warmth)
   Light = warm paper #FAF6EF
   Retinted to the Tungsten palette 2026-08-11 (no blue/purple, per Oleg)
   Accent red var(--ok-accent) stays in both modes.
   Footer follows theme: dark #141414 / light #E8E8EC.
   ============================================================ */
/* ---------- DARK MODE (default) ---------- */
:root,
html[data-theme="dark"] {
    /* Core variables (overriding style.css navy values with pure blacks) */
    --ok-bg: #121214 !important;
    --ok-surface: #1C1C1F !important;
    --ok-surface-alt: #2A2A2D !important;
    --ok-text: #F1EFE9 !important;
    --ok-text-muted: #A6A69E !important;
    --ok-accent:        #B0C0A5 !important;
    --ok-accent-hover: #9DB08F !important;
    --ok-accent-ink: #121214 !important;
    --ok-link: #B0C0A5 !important;
    --ok-border: #37373C !important;
    --ok-card: #1C1C1F !important;
    --ok-input-bg: #2A2A2D !important;
    --ok-input-border: #45454B !important;
    --ok-footer-bg: #0E0E10 !important;
    --ok-proof-strip: #1C1C1F !important;
    --ok-hero-overlay:  rgba(0,0,0,0.6) !important;
    --ok-sun-display:   block !important;
    --ok-moon-display:  none !important;
    /* MISSING ALIASES — used in style.css but never defined */
    --ok-red: var(--ok-accent) !important;
    --ok-blue: var(--ok-link) !important;
    --ok-bg-alt: #2A2A2D !important;
    --ok-bg-accent: #1C1C1F !important;
    --ok-bg-footer: #0E0E10 !important;
    --ok-card-bg: #1C1C1F !important;
    --ok-card-border: #37373C !important;
    --ok-text-faint: #86867F !important;
    --ok-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    --ok-header-bg: rgba(18,18,20,0.95) !important;
    --ok-header-blur:   blur(12px) !important;
    --ok-shadow:        rgba(0,0,0,0.4) !important;
}
/* ---------- LIGHT MODE ---------- */
html[data-theme="light"] {
    /* Core variables */
    --ok-bg: #FAF6EF !important;
    --ok-surface: #FFFFFF !important;
    --ok-surface-alt: #F1ECDF !important;
    --ok-text: #1E1E21 !important;
    --ok-text-muted: #68655B !important;
    --ok-accent:        #1E1E21 !important;
    --ok-accent-hover: #3B3B41 !important;
    --ok-accent-ink: #FAF6EF !important;
    --ok-link: #4E7A67 !important;
    --ok-border: #E1DBCC !important;
    --ok-card: #FFFFFF !important;
    --ok-input-bg: #FFFFFF !important;
    --ok-input-border: #D6D0C2 !important;
    --ok-footer-bg: #F1ECDF !important;
    --ok-proof-strip: #F1ECDF !important;
    --ok-hero-overlay:  rgba(0,0,0,0.3) !important;
    --ok-sun-display:   none !important;
    --ok-moon-display:  block !important;
    /* MISSING ALIASES */
    --ok-red: var(--ok-accent) !important;
    --ok-blue: var(--ok-link) !important;
    --ok-bg-alt: #F1ECDF !important;
    --ok-bg-accent: #F1ECDF !important;
    --ok-bg-footer: #F1ECDF !important;
    --ok-card-bg: #FFFFFF !important;
    --ok-card-border: #E1DBCC !important;
    --ok-text-faint: #8B887E !important;
    --ok-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    --ok-header-bg: rgba(250,246,239,0.95) !important;
    --ok-header-blur:   blur(12px) !important;
    --ok-shadow:        rgba(0,0,0,0.1) !important;
}
/* ============================================================
   SMOOTH TRANSITIONS
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
body,
#page,
.site,
.ast-separate-container,
.site-content,
.entry-content,
.ok-section,
.ok-section-dark,
.ok-section-alt,
.ok-proof-strip,
.ok-hero,
.ok-product-card,
.ok-blog-card,
.ok-category-card,
.ok-email-section,
.ok-footer,
.ok-about,
.ok-header,
.site-header,
input, textarea, select {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
}
/* ============================================================
   ASTRA BODY/ROOT OVERRIDES
   Hardcoded fallback values so Astra wrappers always respond
   ============================================================ */
html[data-theme="dark"] body,
html[data-theme="dark"] #page,
html[data-theme="dark"] .site,
html[data-theme="dark"] .ast-separate-container,
html[data-theme="dark"] .ast-page-builder-template,
html[data-theme="dark"] #content,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] main,
html[data-theme="dark"] .ast-container {
    background-color: #121214 !important;
    color: #F1EFE9 !important;
}
html[data-theme="light"] body,
html[data-theme="light"] #page,
html[data-theme="light"] .site,
html[data-theme="light"] .ast-separate-container,
html[data-theme="light"] .ast-page-builder-template,
html[data-theme="light"] #content,
html[data-theme="light"] .site-content,
html[data-theme="light"] main,
html[data-theme="light"] .ast-container {
    background-color: #FAF6EF !important;
    color: #1E1E21 !important;
}
/* ---------- ASTRA SPECIFIC CLASSES ---------- */
html[data-theme="dark"] .ast-separate-container .ast-article-single,
html[data-theme="dark"] .ast-separate-container .ast-article-post,
html[data-theme="dark"] .ast-plain-container,
html[data-theme="dark"] .ast-no-sidebar,
html[data-theme="dark"] .ast-full-width-layout {
    background-color: #121214 !important;
}
html[data-theme="light"] .ast-separate-container .ast-article-single,
html[data-theme="light"] .ast-separate-container .ast-article-post,
html[data-theme="light"] .ast-plain-container,
html[data-theme="light"] .ast-no-sidebar,
html[data-theme="light"] .ast-full-width-layout {
    background-color: #FAF6EF !important;
}
/* ============================================================
   SECTIONS — Hardcoded overrides for custom sections
   ============================================================ */
html[data-theme="dark"] .ok-section       { background-color: #1C1C1F !important; }
html[data-theme="dark"] .ok-section-dark  { background-color: #121214 !important; }
html[data-theme="dark"] .ok-section-alt   { background-color: #222222 !important; }
html[data-theme="dark"] .ok-proof-strip   { background-color: #1C1C1F !important; }
html[data-theme="dark"] .ok-email-section { background-color: #1C1C1F !important; }
html[data-theme="dark"] .ok-about         { background-color: #121214 !important; }
html[data-theme="light"] .ok-section       { background-color: #FFFFFF !important; }
html[data-theme="light"] .ok-section-dark  { background-color: #FAF6EF !important; }
html[data-theme="light"] .ok-section-alt   { background-color: #F2F2F2 !important; }
html[data-theme="light"] .ok-proof-strip   { background-color: #F0F0F0 !important; }
html[data-theme="light"] .ok-email-section { background-color: #F2F2F2 !important; }
html[data-theme="light"] .ok-about         { background-color: #FAF6EF !important; }
/* ============================================================
   HEADER
   ============================================================ */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .ast-primary-header-bar,
html[data-theme="dark"] #masthead,
html[data-theme="dark"] .ok-header {
    background-color: #121214 !important;
}
html[data-theme="light"] .site-header,
html[data-theme="light"] .ast-primary-header-bar,
html[data-theme="light"] #masthead,
html[data-theme="light"] .ok-header {
    background-color: #FAF6EF !important;
}
html[data-theme="dark"] .main-header-bar a,
html[data-theme="dark"] .ok-nav a {
    color: #F1EFE9 !important;
}
html[data-theme="light"] .main-header-bar a,
html[data-theme="light"] .ok-nav a {
    color: #1E1E21 !important;
}
/* ============================================================
   TEXT — Generic text colors per theme
   IMPORTANT: These must NOT override .ok-hero text (which is
   always white regardless of theme). The hero-specific rules
   below have higher specificity to prevent that.
   ============================================================ */
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
    color: #F1EFE9 !important;
}
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span:not(.ok-accent-text):not(.ok-counter) {
    color: #CCCCCC !important;
}
html[data-theme="dark"] .ok-text-muted { color: #999999 !important; }
html[data-theme="light"] h1, html[data-theme="light"] h2,
html[data-theme="light"] h3, html[data-theme="light"] h4,
html[data-theme="light"] h5, html[data-theme="light"] h6 {
    color: #1E1E21 !important;
}
html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] span:not(.ok-accent-text):not(.ok-counter) {
    color: #333333 !important;
}
html[data-theme="light"] .ok-text-muted { color: #555555 !important; }
/* ============================================================
   HERO TEXT — Always white regardless of theme
   The hero has a dark overlay, so text must stay white in both
   dark and light modes. These rules are MORE specific than the
   generic p/h1 rules above so they win.
   ============================================================ */
html[data-theme="dark"] .ok-hero h1,
html[data-theme="dark"] .ok-hero h1 span,
html[data-theme="dark"] .ok-hero p,
html[data-theme="dark"] .ok-hero .ok-subtitle,
html[data-theme="dark"] .ok-hero-content h1,
html[data-theme="dark"] .ok-hero-content p,
html[data-theme="light"] .ok-hero h1,
html[data-theme="light"] .ok-hero h1 span,
html[data-theme="light"] .ok-hero p,
html[data-theme="light"] .ok-hero .ok-subtitle,
html[data-theme="light"] .ok-hero-content h1,
html[data-theme="light"] .ok-hero-content p {
    color: #FFFFFF !important;
}
/* Hero subtitle and tagline — visible but slightly softer */
html[data-theme="dark"] .ok-hero .ok-subtitle,
html[data-theme="dark"] .ok-hero-content .ok-subtitle,
html[data-theme="light"] .ok-hero .ok-subtitle,
html[data-theme="light"] .ok-hero-content .ok-subtitle {
    color: #FFFFFF !important;
}
/* Hero "Filmmaker. Creator. Educator." line */
html[data-theme="dark"] .ok-hero-content > p:first-of-type,
html[data-theme="light"] .ok-hero-content > p:first-of-type {
    color: rgba(255,255,255,0.95) !important;
}
/* Hero red accent text (KOVALOV) stays red */
html[data-theme="dark"] .ok-hero h1 span,
html[data-theme="light"] .ok-hero h1 span {
    color: var(--ok-accent) !important;
}
/* Hero buttons — keep white text on both modes */
html[data-theme="dark"] .ok-hero .ok-btn,
html[data-theme="light"] .ok-hero .ok-btn {
    color: #FFFFFF !important;
}
html[data-theme="dark"] .ok-hero .ok-btn-outline,
html[data-theme="light"] .ok-hero .ok-btn-outline {
    color: var(--ok-accent) !important;
    border-color: var(--ok-accent) !important;
}
html[data-theme="dark"] .ok-hero .ok-btn-outline:hover,
html[data-theme="light"] .ok-hero .ok-btn-outline:hover {
    color: #FFFFFF !important;
}
/* ============================================================
   FIX: PROOF STRIP ALIGNMENT
   "Trusted by creators worldwide" was sitting higher than the
   number stats because the flex items weren't baseline-aligned.
   ============================================================ */
.ok-proof-strip .ok-stats-inline {
    align-items: center !important;
}
.ok-proof-strip .ok-stat-item {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    line-height: 1.4 !important;
}
/* Counter numbers in proof strip */
html[data-theme="dark"] .ok-proof-strip .ok-stat-item,
html[data-theme="dark"] .ok-proof-strip .ok-stat-item span {
    color: #F1EFE9 !important;
}
html[data-theme="light"] .ok-proof-strip .ok-stat-item,
html[data-theme="light"] .ok-proof-strip .ok-stat-item span {
    color: #1E1E21 !important;
}
html[data-theme="dark"] .ok-proof-strip .ok-counter,
html[data-theme="light"] .ok-proof-strip .ok-counter {
    color: var(--ok-accent) !important;
}
/* Trust phrase in proof strip — matches other stat items */
.ok-proof-strip .ok-stat-trust,
.ok-proof-strip .ok-stats-inline .ok-stat-item.ok-stat-trust,
.ok-stat-trust {
    font-style: normal !important;
    font-family: inherit !important;
    opacity: 1 !important;
    letter-spacing: 0 !important;
}
/* ============================================================
   READABILITY — Bumped +0.20rem total from base for accessibility
   ============================================================ */

/* Navigation links: 0.85 → 1.05rem */
.ok-nav a {
    font-size: 1.1rem !important;
}

/* Proof strip stats: 0.9 → 1.1rem */
.ok-proof-strip .ok-stat-item {
    font-size: 1.1rem !important;
}

/* Proof strip counter numbers: 1.1 → 1.3rem */
.ok-proof-strip .ok-stat-item span {
    font-size: 1.3rem !important;
}

/* Section subtitles: 1.1 → 1.3rem */
.ok-section-subtitle {
    font-size: 1.3rem !important;
}

/* Product card titles: 1rem → 1.2rem */
.ok-product-info h3 {
    font-size: 1.2rem !important;
}

/* Product card descriptions / details: 0.8 → 1rem */
.ok-product-info p,
.ok-product-details {
    font-size: 1rem !important;
}

/* Product card price: 1.3 → 1.5rem */
.ok-product-price {
    font-size: 1.5rem !important;
}

/* Category card titles: 1rem → 1.2rem */
.ok-category-card h3 {
    font-size: 1.2rem !important;
}

/* Category card descriptions: 0.85 → 1.05rem */
.ok-category-card p {
    font-size: 1.05rem !important;
}

/* Blog card titles: 1rem → 1.2rem */
.ok-blog-content h3 {
    font-size: 1.2rem !important;
}

/* Blog card descriptions: 0.85 → 1.05rem */
.ok-blog-content p {
    font-size: 1.05rem !important;
}

/* Blog card meta (date, etc.): 0.8 → 1rem */
.ok-blog-meta {
    font-size: 1rem !important;
}

/* Gear card titles: 1rem → 1.2rem */
.ok-gear-card h3 {
    font-size: 1.2rem !important;
}

/* Gear card descriptions: 0.85 → 1.05rem */
.ok-gear-card p {
    font-size: 1.05rem !important;
}

/* Affiliate buttons: 0.75 → 0.95rem */
.ok-affiliate-btns a {
    font-size: 0.95rem !important;
}

/* Footer headings: 0.85 → 1.05rem */
.ok-footer h4 {
    font-size: 1.05rem !important;
}

/* Footer links: 0.9 → 1.1rem */
.ok-footer a {
    font-size: 1.1rem !important;
}

/* Footer copyright: 0.8 → 1rem */
.ok-footer-bottom {
    font-size: 1rem !important;
}

/* About section body text */
.ok-about-text p,
.ok-about p {
    font-size: 1.2rem !important;
    line-height: 1.7 !important;
}

/* Form inputs & buttons: 1rem → 1.15rem */
.ok-form input,
.ok-form textarea,
.ok-form select {
    font-size: 1.2rem !important;
}

/* General card & section body text catch-all */
.ok-section p:not(.ok-hero-tagline):not(.ok-hero-subtitle):not(.ok-section-subtitle) {
    font-size: 1.15rem !important;
    line-height: 1.7 !important;
}

/* ============================================================
   CARDS — Hardcoded overrides
   ============================================================ */
html[data-theme="dark"] .ok-product-card,
html[data-theme="dark"] .ok-blog-card,
html[data-theme="dark"] .ok-category-card,
html[data-theme="dark"] .ok-gear-card {
    background-color: #1C1C1F !important;
    border-color: #333333 !important;
}
html[data-theme="light"] .ok-product-card,
html[data-theme="light"] .ok-blog-card,
html[data-theme="light"] .ok-category-card,
html[data-theme="light"] .ok-gear-card {
    background-color: #FFFFFF !important;
    border-color: #DDDDDD !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
/* ============================================================
   INPUTS / FORMS
   ============================================================ */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #222222 !important;
    border-color: #444444 !important;
    color: #F1EFE9 !important;
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background-color: #FFFFFF !important;
    border-color: #CCCCCC !important;
    color: #1E1E21 !important;
}
/* ============================================================
   FOOTER - follows the sage tokens (--ok-footer-bg), 2026-09-03
   ============================================================ */
/* --- Dark footer --- */
html[data-theme="dark"] .ok-footer,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] footer {
    background-color: var(--ok-footer-bg, #0E0E10) !important;
    background-image: none !important;
}
html[data-theme="dark"] .ok-footer,
html[data-theme="dark"] .ok-footer p,
html[data-theme="dark"] .ok-footer a,
html[data-theme="dark"] .ok-footer li,
html[data-theme="dark"] .ok-footer span {
    color: rgba(255,255,255,0.7) !important;
}
html[data-theme="dark"] .ok-footer h4 {
    color: var(--ok-accent) !important;
}
html[data-theme="dark"] .ok-footer h1,
html[data-theme="dark"] .ok-footer h2,
html[data-theme="dark"] .ok-footer h3,
html[data-theme="dark"] .ok-footer h4,
html[data-theme="dark"] .ok-footer h5,
html[data-theme="dark"] .ok-footer h6 {
    color: rgba(255,255,255,0.7) !important;
}
html[data-theme="dark"] .ok-footer-bottom {
    color: rgba(255,255,255,0.5) !important;
}
html[data-theme="dark"] .ok-footer .ok-logo {
    color: #FFFFFF !important;
}
/* --- Light footer --- */
html[data-theme="light"] .ok-footer,
html[data-theme="light"] .site-footer,
html[data-theme="light"] footer {
    background-color: var(--ok-footer-bg, #F1ECDF) !important;
    background-image: none !important;
}
html[data-theme="light"] .ok-footer,
html[data-theme="light"] .ok-footer p,
html[data-theme="light"] .ok-footer a,
html[data-theme="light"] .ok-footer li,
html[data-theme="light"] .ok-footer span {
    color: rgba(30,30,50,0.7) !important;
}
html[data-theme="light"] .ok-footer h4 {
    color: var(--ok-accent) !important;
}
html[data-theme="light"] .ok-footer h1,
html[data-theme="light"] .ok-footer h2,
html[data-theme="light"] .ok-footer h3,
html[data-theme="light"] .ok-footer h4,
html[data-theme="light"] .ok-footer h5,
html[data-theme="light"] .ok-footer h6 {
    color: rgba(30,30,50,0.7) !important;
}
html[data-theme="light"] .ok-footer-bottom {
    color: rgba(30,30,50,0.5) !important;
}
html[data-theme="light"] .ok-footer .ok-logo {
    color: #1E1E21 !important;
}
/* ============================================================
   SUN / MOON ICONS
   ============================================================ */
html[data-theme="dark"]  .ok-icon-sun  { display: block !important; }
html[data-theme="dark"]  .ok-icon-moon { display: none  !important; }
html[data-theme="light"] .ok-icon-sun  { display: none  !important; }
html[data-theme="light"] .ok-icon-moon { display: block !important; }

/* ============================================================
   GEAR PAGE — Layout fixes
   ============================================================ */

/* 1) Reduce hero height on gear page (subpage, not homepage) */
.page-id-69 .ok-hero {
    min-height: 28vh !important;
    padding-top: 100px !important;
    padding-bottom: 40px !important;
}

/* 2) Reduce gap between hero and first section */
.page-id-69 .ok-section {
    padding-top: 2.5rem !important;
}

/* 3) Gear cards — flexbox column so buttons pin to bottom */
.ok-gear-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: 100% !important;
}

/* Push affiliate buttons to the bottom of each card */
.ok-gear-card .ok-affiliate-btns {
    margin-top: auto !important;
    padding-top: 16px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* Consistent button sizing */
.ok-affiliate-btns a {
    padding: 10px 20px !important;
    min-width: 100px !important;
    text-align: center !important;
}

/* Gear card description — let it grow but push buttons down */
.ok-gear-card p {
    flex-grow: 1 !important;
    margin-bottom: 0 !important;
}

/* Gear card title — consistent spacing */
.ok-gear-card h3 {
    margin: 12px 0 8px !important;
}

/* Gear card thumbnail — consistent */
.ok-gear-card .ok-product-thumb {
    width: 100% !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   ACCENT SPAN SPECIFICITY FIX (2026-07-19)
   The generic per-theme span rules above use two :not() classes,
   giving them (0,3,1) specificity, which silently beat the intended
   (0,2,2) hero/logo accent rules and turned every red accent span
   gray in both themes. These rules match that specificity and come
   later in the cascade, so the brand red wins again.
   ============================================================ */
html[data-theme="dark"] .ok-hero h1 span:not(.ok-counter),
html[data-theme="light"] .ok-hero h1 span:not(.ok-counter) {
    color: var(--ok-accent) !important;
}
html[data-theme="dark"] .ok-logo span:not(.ok-counter),
html[data-theme="light"] .ok-logo span:not(.ok-counter) {
    color: var(--ok-accent) !important;
}

/* ============================================================
   ACCESSIBILITY CONTRAST PASS (2026-07-19)
   - .ok-btn white-on-var(--ok-accent) measured 4.16:1 (needs 4.5). The darker
     brand hover red var(--ok-accent) gives 5.2:1, hover steps darker still.
   - Small red links on dark surfaces measured ~4.2:1; use the same
     accessible red pair the Lens Advisor footer already ships.
   - .ok-footer-heading generalizes the Lens Advisor footer h2 pattern.
   ============================================================ */
.ok-btn,
.ok-price-btn,
.ok-gw-item .ok-gw-price-btn {
    background: var(--ok-accent) !important;
}
.ok-btn:hover, .ok-btn:focus-visible,
.ok-price-btn:hover, .ok-price-btn:focus-visible,
.ok-gw-item .ok-gw-price-btn:hover,
.ok-gw-item .ok-gw-price-btn:focus-visible {
    background: var(--ok-accent-hover) !important;
}
.ok-btn-outline, .ok-btn-secondary { background: transparent !important; }

html[data-theme="dark"] .ok-gear-disclosure a,
html[data-theme="dark"] .ok-ca-result-link,
html[data-theme="dark"] .ok-ca-empty a,
html[data-theme="dark"] .ok-ca-related a,
html[data-theme="dark"] .ok-tool-noscript a,
html[data-theme="dark"] .ok-gw-email a,
html[data-theme="dark"] .ok-gw-disclosure-bottom a {
    color: var(--ok-link) !important;
}
html[data-theme="light"] .ok-gear-disclosure a,
html[data-theme="light"] .ok-ca-result-link,
html[data-theme="light"] .ok-ca-empty a,
html[data-theme="light"] .ok-ca-related a,
html[data-theme="light"] .ok-tool-noscript a,
html[data-theme="light"] .ok-gw-email a,
html[data-theme="light"] .ok-gw-disclosure-bottom a {
    color: var(--ok-link) !important;
}

.ok-footer .ok-footer-heading {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 20px;
}
html[data-theme="dark"] .ok-footer .ok-footer-heading { color: var(--ok-link) !important; }
html[data-theme="light"] .ok-footer .ok-footer-heading { color: var(--ok-link) !important; }

/* Light-theme footer text: the 0.6-opacity taglines fall under 4.5:1 on the
   light footer background. Full opacity with a dark slate reads the same. */
html[data-theme="light"] .ok-footer p,
html[data-theme="light"] .ok-footer li,
html[data-theme="light"] .ok-footer .ok-footer-bottom {
    opacity: 1 !important;
    color: #3D3D4E !important;
}
html[data-theme="light"] .ok-footer a { color: #2B2B3A !important; }

/* ============================================================
   TUNGSTEN - the previous palette, kept as a one-attribute switch:
   <html data-palette="tungsten">. Sage (above) is the default since
   2026-09-02, adopted from Oleg's Claude Design Homepage.dc.html.
   ============================================================ */
html[data-palette="tungsten"] {
    --ok-bg: #171310 !important; --ok-surface: #201B16 !important; --ok-surface-alt: #2A241D !important;
    --ok-text: #F2EDE4 !important; --ok-text-muted: #B5AA99 !important;
    --ok-accent: #E63946 !important; --ok-accent-hover: #C42D3A !important; --ok-accent-ink: #FFFFFF !important;
    --ok-link: #F2757E !important; --ok-border: #3B332A !important;
    --ok-card: #201B16 !important; --ok-card-bg: #201B16 !important; --ok-card-border: #3B332A !important;
    --ok-input-bg: #2A241D !important; --ok-bg-alt: #2A241D !important; --ok-bg-accent: #201B16 !important;
    --ok-proof-strip: #201B16 !important; --ok-header-bg: rgba(23,19,16,0.95) !important;
}
html[data-palette="tungsten"][data-theme="light"] {
    --ok-bg: #FAF7F1 !important; --ok-surface: #FFFFFF !important; --ok-surface-alt: #F3EDE3 !important;
    --ok-text: #221C15 !important; --ok-text-muted: #6E6455 !important;
    --ok-accent: #E63946 !important; --ok-accent-hover: #C42D3A !important; --ok-accent-ink: #FFFFFF !important;
    --ok-link: #B02A34 !important; --ok-border: #E2D9CB !important;
    --ok-card: #FFFFFF !important; --ok-card-bg: #FFFFFF !important; --ok-card-border: #E2D9CB !important;
    --ok-input-bg: #FFFFFF !important; --ok-bg-alt: #F3EDE3 !important; --ok-bg-accent: #F3EDE3 !important;
    --ok-proof-strip: #F3EDE3 !important; --ok-header-bg: rgba(250,247,241,0.95) !important;
}