/* OHSE.app theme layer. Dark is the original design of every page.
   Everything under html[data-theme="light"] is the light version.
   --pgl is the page's accent colour made dark enough to read on white. */

/* ---------- Toggle (both themes) ---------- */
.ohse-theme{position:fixed;top:18px;right:18px;z-index:120;display:inline-flex;gap:2px;padding:3px;border-radius:100px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.ohse-theme.in-slot{position:static;z-index:auto}
.ohse-theme button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:100px;font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:#c7c7cc;cursor:pointer;transition:background .2s,color .2s;line-height:1}
.ohse-theme button svg{width:14px;height:14px;flex:0 0 auto}
.ohse-theme button:hover{color:#fff;background:rgba(255,255,255,.1)}
.ohse-theme button[aria-checked="true"]{background:#fff;color:#111}
.ohse-theme button:focus-visible{outline:2px solid #2997ff;outline-offset:2px}
@media(max-width:400px){.ohse-theme button{padding:8px 10px}.ohse-theme button .t{display:none}.ohse-theme button svg{width:16px;height:16px}}
html[data-theme="light"] .ohse-theme{background:rgba(255,255,255,.85);border-color:rgba(0,0,0,.14)}
html[data-theme="light"] .ohse-theme button{color:#515154}
html[data-theme="light"] .ohse-theme button:hover{color:#000;background:rgba(0,0,0,.06)}
html[data-theme="light"] .ohse-theme button[aria-checked="true"]{background:#1d1d1f;color:#fff}
html[data-theme="light"] .ohse-theme button:focus-visible{outline-color:#0071e3}
/* header pages: sit inside the header row */
[data-theme-slot]{display:flex;align-items:center;gap:18px}

/* ---------- Light theme: shared variables ---------- */
html[data-theme="light"]{
  color-scheme:light;
  /* legal / home / about / contact pages */
  --bg-page:#f5f5f7; --bg-card:#ffffff; --bg-card-hover:#fafafc;
  --text-headline:#1d1d1f; --text-body:#515154;
  --border-glass:rgba(0,0,0,.1);
  --shadow-floating:0 30px 80px rgba(0,0,0,.14);
  /* tool presentation pages */
  --bg:#f5f5f7; --card-bg:rgba(255,255,255,.92); --border:rgba(0,0,0,.1);
  --text-main:#1d1d1f; --text-muted:#5f6368;
  --pgl:#0071e3;
}
html[data-theme="light"] body{background-color:#f5f5f7;color:var(--text-body)}

/* headings that were hard-coded white */
html[data-theme="light"] .card h2,
html[data-theme="light"] .doc-card h2,
html[data-theme="light"] .doc-card strong,
html[data-theme="light"] .tool-item .name,
html[data-theme="light"] .field label,
html[data-theme="light"] .lang-point b,
html[data-theme="light"] .privacy-point b,
html[data-theme="light"] .legal-point b,
html[data-theme="light"] .back-home:hover{color:#1d1d1f}

/* gradient headlines */
html[data-theme="light"] .metallic-text,
html[data-theme="light"] .hero h1{
  background:linear-gradient(180deg,#1d1d1f 30%,#3a3a3c 70%,#6e6e73 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:#1d1d1f}
html[data-theme="light"] .hero .updated{color:#6e6e73}

/* top-left back button and pills */
html[data-theme="light"] .home-link,
html[data-theme="light"] .chip,
html[data-theme="light"] .ghost-btn,
html[data-theme="light"] .lang-chips span{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.14);color:#1d1d1f}
html[data-theme="light"] .home-link:hover,
html[data-theme="light"] .ghost-btn:hover{background:rgba(0,0,0,.1);border-color:rgba(0,0,0,.25)}
html[data-theme="light"] .lang-chips span.on{background:var(--pgl);border-color:var(--pgl);color:#fff}
html[data-theme="light"] .float,
html[data-theme="light"] .sticky-cta{background:rgba(255,255,255,.95);border-color:rgba(0,0,0,.14);color:#1d1d1f;box-shadow:0 16px 40px rgba(0,0,0,.18)}

/* accent text must be darker on white */
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .stat b,
html[data-theme="light"] .tag,
html[data-theme="light"] .showcase-card .tag,
html[data-theme="light"] .problem .kick,
html[data-theme="light"] .langsec .kick,
html[data-theme="light"] .float svg,
html[data-theme="light"] .bento-ico svg,
html[data-theme="light"] .lang-point i,
html[data-theme="light"] .step-num,
html[data-theme="light"] .subscriber-access,
html[data-theme="light"] .highlight-icon svg,
html[data-theme="light"] .privacy-icon svg{color:var(--pgl)}
html[data-theme="light"] .eyebrow i{background:var(--pgl);box-shadow:none}
html[data-theme="light"] .subscriber-access{border-color:rgba(0,0,0,.18);background:rgba(255,255,255,.7)}
html[data-theme="light"] .subscriber-access:hover{background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.12)}

/* surfaces */
html[data-theme="light"] .stat-strip{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.1)}
html[data-theme="light"] .stat{background:#fff}
html[data-theme="light"] .bento-card,
html[data-theme="light"] .showcase-card,
html[data-theme="light"] .highlight-card,
html[data-theme="light"] .step-card,
html[data-theme="light"] .privacy-section,
html[data-theme="light"] .legal-section,
html[data-theme="light"] .tier-card,
html[data-theme="light"] .plan-card{background:#fff;border-color:rgba(0,0,0,.1);box-shadow:0 8px 30px rgba(0,0,0,.06)}
html[data-theme="light"] .showcase-card{box-shadow:0 18px 50px rgba(0,0,0,.10)}
html[data-theme="light"] .tier-card:hover,
html[data-theme="light"] .plan-card:hover{border-color:rgba(0,0,0,.28)}
html[data-theme="light"] .tier-card.selected{border-color:var(--accent,var(--pgl))}
html[data-theme="light"] .langsec{border-color:rgba(var(--pgrgb,0,113,227),.3);background:radial-gradient(110% 120% at 0% 0%,rgba(var(--pgrgb,0,113,227),.10),#fff 60%)}
html[data-theme="light"] .langsec .lead,
html[data-theme="light"] .lang-point p{color:#515154}
html[data-theme="light"] .media-frame{background:#fff !important;border-color:rgba(0,0,0,.1) !important;box-shadow:0 24px 60px rgba(0,0,0,.14) !important}
html[data-theme="light"] .instructions{background:#fff;color:#3a3a3c;border-color:rgba(0,0,0,.12);box-shadow:0 20px 40px rgba(0,0,0,.12)}
html[data-theme="light"] .glow-blob{opacity:.3}
html[data-theme="light"] .hero-visual::before{opacity:.5}
html[data-theme="light"] .cta-btn:disabled{background:#d1d1d6;color:#6e6e73}
html[data-theme="light"] .plan-badge,html[data-theme="light"] .tier-badge{box-shadow:none}

/* contact form */
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea{background:#fff;color:#1d1d1f;border-color:rgba(0,0,0,.2)}
html[data-theme="light"] .submit-btn:disabled{background:#d1d1d6;color:#6e6e73}

/* footer */
html[data-theme="light"] footer,
html[data-theme="light"] footer.legal-footer{border-color:rgba(0,0,0,.1);color:#6e6e73}
html[data-theme="light"] footer .footer-links a,
html[data-theme="light"] footer.legal-footer a{color:#515154 !important}
html[data-theme="light"] footer .footer-links a:hover{color:#000 !important}
html[data-theme="light"] body::before{background-image:linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px)}
html[data-theme="light"] .electric-glow{opacity:.45}

/* Per-page accent, readable on white */
html[data-pg="report"]{--pgl:#0071e3}
html[data-pg="inspection"]{--pgl:#1e7e34}
html[data-pg="induction"]{--pgl:#b45f00}
html[data-pg="toolbox"]{--pgl:#8e24c4}
html[data-pg="progress"]{--pgl:#0a6f8f}

/* ---------- Homepage (index.html) light details ---------- */
html[data-theme="light"] .ai-tag{color:#1d1d1f;background:rgba(0,113,227,.08);box-shadow:0 0 25px rgba(0,113,227,.12)}
html[data-theme="light"] .ai-pulse{background:#0071e3}
html[data-theme="light"] .mobile-hint-badge{color:#515154 !important}
html[data-theme="light"] .card-perspective-wrapper.card-tracker h3{color:#0071e3}
html[data-theme="light"] .card-perspective-wrapper.card-inspection h3{color:#1e7e34}
html[data-theme="light"] .card-perspective-wrapper.card-induction h3{color:#b45f00}
html[data-theme="light"] .card-perspective-wrapper.card-toolboxtalks h3{color:#8e24c4}
html[data-theme="light"] .card-perspective-wrapper.card-progress h3{color:#0a6f8f}
html[data-theme="light"] .metric-card.card-zero .big-metric{background:linear-gradient(180deg,#34c759,#1e7e34);-webkit-background-clip:text;background-clip:text}
html[data-theme="light"] .metric-card.card-ten .big-metric{background:linear-gradient(180deg,#ff375f,#c4163f);-webkit-background-clip:text;background-clip:text}
html[data-theme="light"] .metric-card.card-hundred .big-metric{background:linear-gradient(180deg,#14b8d6,#0a6f8f);-webkit-background-clip:text;background-clip:text}