/* ===== OSHOT THEME: DARK / LIGHT ===== */
:root { color-scheme: dark; }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 41px;
  height: 41px;
  margin-left: auto;
  border: 1px solid var(--pill-border);
  border-radius: 0;
  background: transparent;
  font-size: 16px;
  color: var(--white);
  transition: border-color .2s, color .2s;
}
.theme-toggle:hover { border-color: var(--red); color: var(--red); }
.theme-toggle .bi-moon-fill { display: none; }
.navbar-toggler { margin-left: 12px; }

@media (min-width: 1200px) {
  .theme-toggle { order: 3; margin-left: 24px; }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f1ec;
  --white: #141414;
  --muted: #6b7078;
  --line: rgba(0, 0, 0, .14);
  --pill-border: rgba(0, 0, 0, .25);
}

[data-theme="light"] .theme-toggle .bi-sun-fill { display: none; }
[data-theme="light"] .theme-toggle .bi-moon-fill { display: inline; }
[data-theme="light"] .navbar-toggler-icon { filter: none; }
[data-theme="light"] body::before { opacity: .25; }

[data-theme="light"] .reel-stage,
[data-theme="light"] .case-stage,
[data-theme="light"] .contact {
  --white: #ffffff;
  --bg: #1a1a1a;
}

[data-theme="light"] .site-nav { background: #ebe7df; border-bottom-color: #cfc9be; }
[data-theme="light"] .status-pill { border-color: #cfc9be; color: #6b6b6b; }
[data-theme="light"] .btn-start { background: rgba(196, 69, 54, .1); }
[data-theme="light"] .btn-start:hover { color: #fff; }
[data-theme="light"] .hero-text { color: #555; }
[data-theme="light"] .specs { color: #6b6b6b; }
[data-theme="light"] .explore { border-bottom-color: rgba(0, 0, 0, .35); }

[data-theme="light"] .work-filter { color: #444; }
[data-theme="light"] .work-filter:hover { color: #141414; }
[data-theme="light"] .work-filter.is-active { color: #fff; }
[data-theme="light"] .work-media {
  border-color: #d4cec3;
  background-color: #e6e1d7;
  background-image: linear-gradient(to bottom, #ece8df, #ddd7cb);
}
[data-theme="light"] .work-card:hover .work-media { border-color: #bdb6a8; }
[data-theme="light"] .work-num,
[data-theme="light"] .work-arrow,
[data-theme="light"] .work-pill,
[data-theme="light"] .cursor-pill,
[data-theme="light"] .sv-pill { color: #fff; }

[data-theme="light"] .pipeline {
  --pl-card: #fbf9f5;
  --pl-line: #d6d0c4;
  --pl-white: #141414;
  --pl-lead: #4a4a4a;
  --pl-text: #555;
  --pl-kicker: #777;
  --pl-chip-bg: #ebe6dc;
  --pl-chip-text: #333;
}

[data-theme="light"] .manifesto {
  --mf-line: #d6d0c4;
  --mf-white: #141414;
  --mf-text: #444;
}

[data-theme="light"] .services {
  --sv-line: #d6d0c4;
  --sv-white: #141414;
  --sv-text: #555;
}
[data-theme="light"] .sv-tag { border-color: #cfc9be; color: #666; }
[data-theme="light"] .sv-chips li { color: #222; }
[data-theme="light"] .sv-img { border-color: #cfc9be; background: #e6e1d7; }
[data-theme="light"] .sv-head:hover { background-color: rgba(0, 0, 0, .035); }

[data-theme="light"] .case-content { background: #f4f1ec; border-color: #d6d0c4; }
[data-theme="light"] .case-bar { background: #ebe7df; border-bottom-color: #d6d0c4; }
[data-theme="light"] .case-tag { color: #fff; }
[data-theme="light"] .case-client { color: #555; }
[data-theme="light"] .case-close { color: #444; }
[data-theme="light"] .case-close:hover { color: var(--red); }
[data-theme="light"] .case-frames { background: #ebe7df; border-bottom-color: #d6d0c4; }
[data-theme="light"] .case-thumb { border-color: #cfc9be; }
[data-theme="light"] .case-text-1 { color: #1a1a1a; }
[data-theme="light"] .case-text-2 { color: #444; }
[data-theme="light"] .case-chip { border-color: #bdb6a8; color: #333; }
[data-theme="light"] .case-sheet { background: #fbf9f5; border-color: #d6d0c4; }
[data-theme="light"] .case-sheet-head { border-bottom-color: #d6d0c4; }
[data-theme="light"] .case-cta,
[data-theme="light"] .case-cta:hover { color: #fff; }

[data-theme="light"] .brief-modal .modal-content { background: #f4f1ec; border-color: #d6d0c4; }
[data-theme="light"] .bf-head { border-bottom-color: #d6d0c4; }
[data-theme="light"] .bf-close { color: #444; }
[data-theme="light"] .bf-close:hover { color: var(--red); }
[data-theme="light"] .bf-label { color: #555; }
[data-theme="light"] .bf-input { background-color: #fff; border-color: #cfc9be; }
[data-theme="light"] .bf-input::placeholder { color: #8a8a8a; }
[data-theme="light"] .bf-input:focus { border-color: var(--red); }
[data-theme="light"] .bf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23141414' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="light"] .bf-select option { background: #fff; color: #141414; }
[data-theme="light"] .bf-mail { color: #666; }
[data-theme="light"] .bf-mail:hover { color: var(--red); }
[data-theme="light"] .bf-send { color: #fff; }


[data-theme="light"] .reel-frame { border-color: rgba(0, 0, 0, .18); }
[data-theme="light"] .reel-bar { background: #ebe7df; border-bottom-color: rgba(0, 0, 0, .12); }
[data-theme="light"] .reel-spec { color: #5b6b7c; }
[data-theme="light"] .gate-btn { background: #fff; border-color: #cfc9be; }
[data-theme="light"] .gate-btn:hover { border-color: var(--red); }
[data-theme="light"] .gate-btn.is-active { background: var(--red); border-color: var(--red); color: #fff; }

[data-theme="light"] .reel-modal .modal-content { background: #f4f1ec; border-color: #d6d0c4; }
[data-theme="light"] .reel-modal-head,
[data-theme="light"] .reel-modal-foot { background: #ebe7df; }
[data-theme="light"] .reel-modal-head { border-bottom-color: #d6d0c4; }
[data-theme="light"] .reel-close { color: #444; }
[data-theme="light"] .reel-close:hover { color: var(--red); }
[data-theme="light"] .chapters button { color: #555; }
[data-theme="light"] .chapters button:hover { color: #141414; }

[data-theme="light"] .studio-btn {
  background: rgba(244, 241, 236, .95);
  border-color: rgba(0, 0, 0, .25);
}
[data-theme="light"] .studio-panel {
  background: #f4f1ec;
  border-color: #d6d0c4;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .18);
}
[data-theme="light"] .sp-head,
[data-theme="light"] .sp-switches { border-color: #d6d0c4; }
[data-theme="light"] .sp-x { color: #555; }
[data-theme="light"] .sp-x:hover { color: var(--red); }
[data-theme="light"] .sp-label { color: #666; }
[data-theme="light"] .sp-input { background: #fff; border-color: #cfc9be; }
[data-theme="light"] .sp-input::placeholder { color: #8a8a8a; }
[data-theme="light"] .sp-input:focus { border-color: var(--red); }
[data-theme="light"] .sp-switch { color: #333; }
[data-theme="light"] .sp-switch input { background: #cfc9be; }
[data-theme="light"] .sp-switch input::after { box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
[data-theme="light"] .sp-switch input:checked { background: var(--red); }
[data-theme="light"] .sp-switch input:focus-visible { outline-color: var(--red); }

[data-theme="light"] .contact {
  --ct-card: #fbf9f5;
  --ct-card-line: #d6d0c4;
  --ct-opt-on: rgba(196, 69, 54, .12);
  --ct-opt-on-line: #c44536;
}
[data-theme="light"] .ct-card { --white: #141414; }
[data-theme="light"] .cfg-label { color: #666; }
[data-theme="light"] .cfg-select {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23141414' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="light"] .cfg-select option { background: #fff; color: #141414; }
[data-theme="light"] .cfg-opt:focus { outline-color: var(--red); }
[data-theme="light"] .cfg-launch { color: #fff; }
/* ABOUT */
[data-theme="light"] .about {
  --ab-line: #d6d0c4;
  --ab-card: #fbf9f5;
  --ab-white: #141414;
  --ab-lead: #444;
  --ab-text: #555;
  --ab-muted: #6b6b6b;
  --ab-btn: rgba(0, 0, 0, .45);
}
[data-theme="light"] .view-switch { background: transparent; border-color: #cfc9be; }
[data-theme="light"] .vs-btn { color: #6b6b6b; }
[data-theme="light"] .vs-btn:hover { color: #141414; }
[data-theme="light"] .vs-btn.is-active { background: var(--red); color: #fff; }