/* Homepage-only Horigin theme layer. Does not change Studio global CSS. */
html { color-scheme: dark; }
.horigin-theme-toggle {
  appearance:none; flex:0 0 auto; width:38px; min-width:38px; height:38px;
  padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:999px;
  background:var(--bg-2); color:var(--fg); cursor:pointer;
  box-shadow:none; transition:background .25s,border-color .25s,color .25s;
}
.horigin-theme-toggle:hover { background:var(--bg-3); border-color:var(--accent); }
.horigin-theme-toggle svg { width:18px; height:18px; display:block; }
.horigin-theme-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
html[data-horigin-theme="light"] {
  color-scheme:light;
  --bg-0:#f5f7fb;
  --bg-1:#eaf0f7;
  --bg-2:#ffffff;
  --bg-3:#e2e9f2;
  --line:rgba(48,66,92,.13);
  --line-2:rgba(48,66,92,.23);
  --fg:#172337;
  --fg-80:rgba(23,35,55,.85);
  --fg-60:rgba(23,35,55,.68);
  --fg-50:rgba(23,35,55,.58);
  --fg-30:rgba(23,35,55,.38);
  --accent:#db741f;
  --accent-2:#f3a14c;
  --accent-deep:#fce3c7;
}
html[data-horigin-theme="light"] body { background:var(--bg-0); color:var(--fg); }
html[data-horigin-theme="light"] .nav {
  background:rgba(250,252,255,.92); border-color:rgba(50,70,95,.18);
  box-shadow:0 7px 30px rgba(22,39,65,.10);
}
html[data-horigin-theme="light"] .nav.scrolled { background:rgba(250,252,255,.95); }
html[data-horigin-theme="light"] .nav-links a,
html[data-horigin-theme="light"] .horigin-nav-brand,
html[data-horigin-theme="light"] .nav .link {color:#172337;}
html[data-horigin-theme="light"] .horigin-nav-brand span {color:#172337;}
html[data-horigin-theme="light"] .btn-primary { background:#e87925; border-color:#e87925; color:#1a1007; }
html[data-horigin-theme="light"] .btn-primary:hover { background:#f6a04d; }
html[data-horigin-theme="light"] .cell,
html[data-horigin-theme="light"] .panel,
html[data-horigin-theme="light"] .horigin-process-grid>div {
  border-color:var(--line-2);
}
html[data-horigin-theme="light"] .cell {
  background:radial-gradient(500px circle at var(--x,50%) var(--y,50%),rgba(227,151,84,.07),transparent 45%),var(--bg-2);
  box-shadow:0 12px 32px rgba(26,45,75,.045);
}
html[data-horigin-theme="light"] .panel,
html[data-horigin-theme="light"] .router,
html[data-horigin-theme="light"] .code,
html[data-horigin-theme="light"] .budget,
html[data-horigin-theme="light"] .toggles { background-color:#f4f7fc; }
html[data-horigin-theme="light"] .cell .txt p,
html[data-horigin-theme="light"] .horigin-process p,
html[data-horigin-theme="light"] .horigin-footer p {color:var(--fg-60);}
html[data-horigin-theme="light"] .node rect {fill:#e9eef7;stroke:#a1aec3;}
html[data-horigin-theme="light"] .node text {fill:#28374d;}
html[data-horigin-theme="light"] .hero,
html[data-horigin-theme="light"] .morph,
html[data-horigin-theme="light"] .cta { color:#f6f7fa; }
html[data-horigin-theme="light"] .hero .lead,
html[data-horigin-theme="light"] .morph .stage p,
html[data-horigin-theme="light"] .cta .lead {color:rgba(247,248,251,.76);}
html[data-horigin-theme="light"] .hero .btn-ghost,
html[data-horigin-theme="light"] .cta .btn-ghost {color:#f6f7fa;border-color:rgba(255,255,255,.3);}
/* WebGL uses a dark renderer background: keep hero/scroll/CTA dark for contrast,
   but protect light content surfaces and restore the bright theme in between. */
html[data-horigin-theme="light"] .hero::after,
html[data-horigin-theme="light"] .morph::after { pointer-events:none; }
html[data-horigin-theme="light"] .horigin-footer { background:var(--bg-0); }
@media(max-width:700px) { .horigin-theme-toggle {width:34px;min-width:34px;height:34px;} }
@media(prefers-reduced-motion:reduce) { .horigin-theme-toggle {transition:none;} }

/* HORIGIN_CINEMATIC_CONTRAST_V1 — homepage only */
/* The WebGL renderer is deliberately dark. Give it a matching canvas backdrop in either theme. */
html[data-horigin-theme="light"] body { background:#0b0f19; }
html[data-horigin-theme="light"] .hero,
html[data-horigin-theme="light"] .morph,
html[data-horigin-theme="light"] .cta {
  --fg:#f5f7fb;
  --fg-80:rgba(245,247,251,.86);
  --fg-60:rgba(245,247,251,.72);
  --fg-50:rgba(245,247,251,.58);
  --line:rgba(211,222,241,.13);
  --line-2:rgba(211,222,241,.25);
  color:#f5f7fb;
}
html[data-horigin-theme="light"] .hero h1,
html[data-horigin-theme="light"] .hero h1 em,
html[data-horigin-theme="light"] .morph .stage h3,
html[data-horigin-theme="light"] .cta h2 {color:#f5f7fb;}
html[data-horigin-theme="light"] .hero h1 em,
html[data-horigin-theme="light"] .morph .stage h3 em,
html[data-horigin-theme="light"] .cta h2 em {color:rgba(245,247,251,.82);}
html[data-horigin-theme="light"] .morph .chip {
  color:#e9edf6;
  background:rgba(255,255,255,.075);
  border-color:rgba(211,222,241,.22);
}
/* Dim luminous WebGL content, not the headline or cards. */
.gl-ready #gl {opacity:.52; transition:opacity .75s ease;}
.gl-ready body.horigin-morph-dim #gl {opacity:.36;}
/* Keep canvas fallback dark and the full light-theme content surfaces bright. */
html[data-horigin-theme="light"] .solid,
html[data-horigin-theme="light"] .horigin-footer {color:#172337;}
@media(prefers-reduced-motion:reduce) { #gl {transition:none;} }