/* ============================================================
   ORVICS — Theme system
   Dark-first identity. Light theme is an explicit user choice.
   Loaded last so semantic components win over legacy utilities.
   ============================================================ */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --o-bg: #0B0F14;
  --o-surface: #11161D;
  --o-surface-2: #161C25;
  --o-surface-tint: #0E1A26;

  --o-border: #232B36;
  --o-border-strong: #2F3A47;

  /* Body copy sits one step below headings, not two: #A8B2BE made the
     jump 1.8x and read as a second material. #C3CBD5 keeps the 11.7:1
     contrast while narrowing the gap to 1.38x. */
  --o-text: #E9ECEF;
  --o-text-2: #C3CBD5;
  --o-text-3: #7E8A98;

  --o-accent-text: #4DA3FF;
  --o-accent: #0078D4;
  --o-accent-hover: #0069BB;
  --o-accent-cyan: #00BCF2;

  --o-focus: #7CC0FF;
  --o-hero-glow: rgba(0, 120, 212, 0.16);
  --o-wa-icon: #25D366;
  --o-wa-tint: rgba(37, 211, 102, 0.10);
  --o-wa-glow: rgba(37, 211, 102, 0.16);
  --o-accent-glow: rgba(77, 163, 255, 0.18);

  /* logo mark — the icon acts as the O.
     Ring (#A8B2BE) and dot (#989B9E) use the brand hairline and matte
     grays already present in orvics-icons/*, not pure white: the mark
     keeps its silhouette and its focal point without glowing.
     Brackets keep their own blue (#0090FF), one step brighter than the
     UI accent so the crosshair reads at wordmark size. */
  --o-mark-fill: transparent;
  --o-mark-ring: #A8B2BE;
  --o-mark-brackets: #0090FF;
  --o-mark-dot: #989B9E;
  /* hover/focus: whole wordmark turns accent */
  --o-mark-hover-fill: transparent;
  --o-mark-hover-ring: var(--o-accent-text);
  --o-mark-hover-brackets: var(--o-accent-text);
  --o-mark-hover-dot: var(--o-accent-text);

  --o-shadow-card: none;
  --o-shadow-card-hover: 0 10px 30px rgba(0, 120, 212, 0.16), 0 2px 8px rgba(0, 0, 0, 0.35);
}

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

  --o-bg: #FFFFFF;
  --o-surface: #F8FAFC;
  --o-surface-2: #FFFFFF;
  --o-surface-tint: #E8F4FC;

  --o-border: #E2E8F0;
  --o-border-strong: #CBD5E1;

  --o-text: #0F172A;
  --o-text-2: #475569;
  --o-text-3: #64748B;

  --o-accent-text: #0078D4;
  --o-accent: #0078D4;
  --o-accent-hover: #0069BB;
  --o-accent-cyan: #00BCF2;

  --o-focus: #0078D4;
  --o-hero-glow: rgba(0, 120, 212, 0.10);
  --o-wa-icon: #128C7E;
  --o-wa-tint: rgba(18, 140, 126, 0.08);
  --o-wa-glow: rgba(18, 140, 126, 0.14);
  --o-accent-glow: rgba(0, 120, 212, 0.16);

  --o-mark-fill: #0F172A;
  --o-mark-ring: rgba(0, 120, 212, 0.20);
  --o-mark-brackets: #0090FF;
  --o-mark-dot: #989B9E;
  /* hover/focus: solid accent disc keeps the O legible */
  --o-mark-hover-fill: var(--o-accent-text);
  --o-mark-hover-ring: rgba(255, 255, 255, 0.35);
  --o-mark-hover-brackets: #FFFFFF;
  --o-mark-hover-dot: #FFFFFF;

  --o-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06);
  --o-shadow-card-hover: 0 12px 28px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
}

/* WhatsApp brand colors — same in both themes */
:root {
  --o-wa: #128C7E;
}

html {
  background: var(--o-bg);
}

body {
  background: var(--o-bg);
  color: var(--o-text);
  line-height: 1.7;
}

::selection {
  background: var(--o-accent);
  color: #FFFFFF;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--o-focus);
  outline-offset: 2px;
}

/* ============================================================
   Semantic surfaces & text
   ============================================================ */

.o-page {
  background: var(--o-bg);
  color: var(--o-text);
}

.o-band {
  background: var(--o-surface);
}

.o-band-tint {
  background: var(--o-surface-tint);
}

.o-card {
  background: var(--o-surface-2);
  border: 1px solid var(--o-border);
  box-shadow: var(--o-shadow-card);
}

/* Product cards — full-area hover/focus feedback */
.o-product-card {
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.o-product-card .o-heading {
  transition: color 160ms ease;
}

.o-product-card:hover,
.o-product-card:focus-visible {
  border-color: var(--o-accent-text);
  background: var(--o-surface-tint);
  box-shadow: var(--o-shadow-card-hover);
  transform: translateY(-2px);
}

.o-product-card:hover .o-heading,
.o-product-card:focus-visible .o-heading {
  color: var(--o-accent-text);
}

@media (prefers-reduced-motion: reduce) {
  .o-product-card {
    transition: border-color 160ms ease, background-color 160ms ease;
  }

  .o-product-card:hover,
  .o-product-card:focus-visible {
    transform: none;
  }
}

.o-card-tint {
  background: var(--o-surface-tint);
  border: 1px solid var(--o-border);
}

.o-heading {
  color: var(--o-text);
}

.o-text-2 {
  color: var(--o-text-2);
}

.o-text-3 {
  color: var(--o-text-3);
}

.o-accent {
  color: var(--o-accent-text);
}

.o-hairline {
  border-color: var(--o-border);
}

.o-hairline-strong {
  border-color: var(--o-border-strong);
}

.o-rule {
  border-color: var(--o-accent);
}

/* Nav links */
.o-nav-link {
  color: var(--o-text-2);
  transition: color 0.15s ease;
}

.o-nav-link:hover,
.o-nav-link[aria-current="true"] {
  color: var(--o-accent-text);
}

/* Accent text links */
.o-link {
  color: var(--o-accent-text);
}

.o-link:hover {
  color: var(--o-accent-cyan);
}

/* Footer links */
.o-footer-link {
  color: var(--o-text-3);
  transition: color 0.15s ease;
}

.o-footer-link:hover {
  color: var(--o-accent-text);
}

/* Hero: tinted top fading into the page base */
.o-hero {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, var(--o-hero-glow), transparent 68%),
    linear-gradient(to bottom, var(--o-surface-tint), var(--o-bg) 78%);
  border-bottom: 1px solid var(--o-border);
}

/* Chips and badges */
.o-chip {
  background: var(--o-surface-2);
  border: 1px solid var(--o-border);
  color: var(--o-text-2);
}

.o-badge {
  background: var(--o-surface-tint);
  border: 1px solid var(--o-border);
  color: var(--o-accent-text);
}

/* Primary actions: accent fill keeps white text at 4.53:1 */
.o-btn-primary {
  background: var(--o-accent);
  color: #FFFFFF;
  border: 1px solid transparent;
}

.o-btn-primary:hover {
  background: var(--o-accent-hover);
}

.o-btn-secondary {
  background: transparent;
  color: var(--o-text);
  border: 1px solid var(--o-border-strong);
}

.o-btn-secondary,
.o-btn-whatsapp-outline {
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.o-btn-secondary:hover,
.o-btn-secondary:focus-visible {
  border-color: var(--o-accent-text);
  background: var(--o-surface-tint);
  box-shadow: 0 8px 20px var(--o-accent-glow);
  transform: translateY(-2px);
}

/* WhatsApp CTA: same outline as the email button, green icon as the brand cue */
.o-btn-whatsapp-outline {
  background: transparent;
  color: var(--o-text);
  border: 1px solid var(--o-border-strong);
}

.o-btn-whatsapp-outline:hover,
.o-btn-whatsapp-outline:focus-visible {
  border-color: var(--o-wa-icon);
  background: var(--o-wa-tint);
  box-shadow: 0 8px 20px var(--o-wa-glow);
  transform: translateY(-2px);
}

.o-btn-whatsapp-outline .wa-icon {
  color: var(--o-wa-icon);
  transition: transform 220ms ease;
}

.o-btn-whatsapp-outline:hover .wa-icon,
.o-btn-whatsapp-outline:focus-visible .wa-icon {
  transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .o-btn-secondary:hover,
  .o-btn-secondary:focus-visible,
  .o-btn-whatsapp-outline:hover,
  .o-btn-whatsapp-outline:focus-visible {
    transform: none;
  }

  .o-btn-whatsapp-outline:hover .wa-icon,
  .o-btn-whatsapp-outline:focus-visible .wa-icon {
    transform: none;
  }
}

/* Dark inverse block (summary) */
.o-summary {
  background: var(--o-surface-tint);
  border: 1px solid var(--o-border);
  color: var(--o-text);
}

.o-summary strong {
  color: var(--o-accent-text);
}

/* Table header on marketing pages */
.o-table-head {
  background: var(--o-surface-2);
  color: var(--o-text);
  border-bottom: 1px solid var(--o-border);
}

/* Footer */
.o-footer {
  background: var(--o-surface);
  border-top: 1px solid var(--o-border);
  color: var(--o-text-2);
}

/* ============================================================
   Logo mark — the icon is the O of ORVICS.
   Geometry is identical in both themes; only color changes.
   ============================================================ */

.orvics-lockup {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--o-text);
}

.orvics-lockup:hover {
  color: var(--o-accent-text);
}

.orvics-mark-disc {
  fill: var(--o-mark-fill);
}

.orvics-mark-ring {
  fill: none;
  stroke: var(--o-mark-ring);
  stroke-width: 1.0;
}

.orvics-mark-brackets {
  fill: none;
  stroke: var(--o-mark-brackets);
  stroke-width: 1.0;
}

.orvics-mark-dot {
  fill: var(--o-mark-dot);
}

/* Hover/focus: the icon reacts with the wordmark, not on its own.
   Without this, only "RVICS" changed color on hover. */
.orvics-mark-disc,
.orvics-mark-ring,
.orvics-mark-brackets,
.orvics-mark-dot {
  transition: fill 160ms ease, stroke 160ms ease;
}

.orvics-lockup:hover .orvics-mark-disc,
.orvics-lockup:focus-visible .orvics-mark-disc {
  fill: var(--o-mark-hover-fill);
}

.orvics-lockup:hover .orvics-mark-ring,
.orvics-lockup:focus-visible .orvics-mark-ring {
  stroke: var(--o-mark-hover-ring);
}

.orvics-lockup:hover .orvics-mark-brackets,
.orvics-lockup:focus-visible .orvics-mark-brackets {
  stroke: var(--o-mark-hover-brackets);
}

.orvics-lockup:hover .orvics-mark-dot,
.orvics-lockup:focus-visible .orvics-mark-dot {
  fill: var(--o-mark-hover-dot);
}

/* ============================================================
   Theme toggle
   ============================================================ */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 0.5rem;
  border: 1px solid var(--o-border);
  background: var(--o-surface-2);
  color: var(--o-text-2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: var(--o-accent-text);
  color: var(--o-accent-text);
}

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

.theme-toggle-icon {
  width: 18px;
  height: 18px;
}

.theme-toggle-icon--moon {
  display: none;
}

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

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

/* ============================================================
   Product demos: light instruments inside a dark workshop.
   Their CSS is untouched; the frame gets theme-aware edges.
   ============================================================ */

:root[data-theme="dark"] .neith-product-frame,
:root[data-theme="dark"] .thoth-product-frame {
  border-color: var(--o-border-strong);
  box-shadow: none;
}

:root[data-theme="light"] .neith-product-frame,
:root[data-theme="light"] .thoth-product-frame {
  border-color: var(--o-border);
}

/* Soften the demo's white intensity on the dark site without touching product CSS */
:root[data-theme="dark"] .neith-demo,
:root[data-theme="dark"] .thoth-demo {
  filter: brightness(0.94) saturate(0.98);
}

/* Neith context note lives outside the demo frame — theme it with the site. */
.neith-demo-context-note {
  background: var(--o-surface);
  border-color: var(--o-border);
  border-left-color: var(--o-accent);
}

.neith-demo-context-note h3 {
  color: var(--o-text);
}

.neith-demo-context-note p {
  color: var(--o-text-2);
  line-height: 1.7;
}

/* ============================================================
   Typography on dark surfaces
   ============================================================ */

.orvics-kicker {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--o-accent-text);
}

/* ============================================================
   Print: documents are always light
   ============================================================ */

@media print {
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"] {
    color-scheme: light;
    --o-bg: #FFFFFF;
    --o-surface: #F8FAFC;
    --o-surface-2: #FFFFFF;
    --o-surface-tint: #FFFFFF;
    --o-border: #E2E8F0;
    --o-border-strong: #CBD5E1;
    --o-text: #0F172A;
    --o-text-2: #334155;
    --o-text-3: #475569;
    --o-accent-text: #0078D4;
    --o-accent: #0078D4;
    --o-mark-fill: #0F172A;
    --o-mark-ring: rgba(0, 120, 212, 0.2);
    }

  .site-nav,
  .theme-toggle,
  .lang-menu,
  .site-nav-toggle {
    display: none !important;
  }

  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}