/* ============================================================
   Cyclops Labs — dark mode
   Active when <html data-theme="dark"> (set by assets/js/theme.js).
   Load after every other stylesheet.
   ============================================================ */

:root[data-theme="dark"] {
  color-scheme: dark;
  --cy-dk-bg:      #0E1A2B;   /* page */
  --cy-dk-bg-alt:  #12223A;   /* tinted sections */
  --cy-dk-surface: #16273F;   /* cards, panels */
  --cy-dk-raised:  #1D3352;   /* icon tiles, hover */
  --cy-dk-border:  #29405F;
  --cy-dk-text:    #E4ECF7;
  --cy-dk-text-2:  #C2CFE0;
  --cy-dk-muted:   #9DAEC4;
  --cy-dk-head:    #F1F6FD;
  --cy-dk-accent:  #8DBBF2;

  /* re-point the ink / surface tokens */
  --cy-mist:    var(--cy-dk-bg);
  --cy-vapor:   var(--cy-dk-bg-alt);
  --cy-sky:     var(--cy-dk-border);
  --cy-blue-50: var(--cy-dk-raised);
  --cy-ink-900: var(--cy-dk-text);
  --cy-ink-700: var(--cy-dk-text-2);
  --cy-ink-400: var(--cy-dk-muted);
  --cy-ink-300: #7F90A8;
  --cy-ink-100: var(--cy-dk-border);
  --cy-border:  var(--cy-dk-border);
  --cy-text-soft: var(--cy-dk-muted);
  --cy-grad-horizon: linear-gradient(135deg, #1F4277 0%, #2B5A9C 55%, #3A70B8 100%);
  --cy-grad-cloud:   linear-gradient(180deg, #14253D 0%, #12223A 100%);
  --cy-shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --cy-shadow-md: 0 4px 14px rgba(0,0,0,.35);
  --cy-shadow-lg: 0 14px 36px rgba(0,0,0,.45);
}
/* pages that set their own ink tokens on <body class="home"> */
[data-theme="dark"] .home { --cy-ink-400: var(--cy-dk-muted); --cy-ink-100: var(--cy-dk-border); }

/* ---------- Base type ---------- */
[data-theme="dark"] body.cy { background: var(--cy-dk-bg); color: var(--cy-dk-text); }
[data-theme="dark"] .cy-root h1, [data-theme="dark"] .cy-root h2, [data-theme="dark"] .cy-root h3,
[data-theme="dark"] .cy-root h4, [data-theme="dark"] .cy-root h5,
[data-theme="dark"] .cy-display, [data-theme="dark"] .cy-h1, [data-theme="dark"] .cy-h2,
[data-theme="dark"] .cy-h3, [data-theme="dark"] .cy-h4,
[data-theme="dark"] .hero h1, [data-theme="dark"] .page-banner h1,
[data-theme="dark"] .home h2, [data-theme="dark"] .home h3 { color: var(--cy-dk-head); }
[data-theme="dark"] .cy-eyebrow, [data-theme="dark"] .home .cy-eyebrow { color: var(--cy-dk-accent); }
[data-theme="dark"] .muted, [data-theme="dark"] .home .muted,
[data-theme="dark"] .hero .cy-lead, [data-theme="dark"] .home .hero .cy-lead,
[data-theme="dark"] .page-banner p, [data-theme="dark"] .cy-lead { color: var(--cy-dk-muted); }
[data-theme="dark"] a { color: var(--cy-dk-accent); }
[data-theme="dark"] a:hover { color: #B5D3F8; }
[data-theme="dark"] a.cy-btn-gradient, [data-theme="dark"] a.cy-btn-primary { color: #fff; }

/* ---------- Header & navigation ---------- */
[data-theme="dark"] .site-header { background: rgba(14,26,43,.88); border-bottom-color: var(--cy-dk-border); }
[data-theme="dark"] .nav-brand { color: var(--cy-dk-head); }
[data-theme="dark"] .nav-links a, [data-theme="dark"] .nav-dd-btn { color: var(--cy-dk-text-2); }
[data-theme="dark"] .nav-links a:hover, [data-theme="dark"] .nav-links a[aria-current="page"],
[data-theme="dark"] .nav-dd-btn:hover, [data-theme="dark"] .nav-dd-btn.is-current,
[data-theme="dark"] .nav-dd.open .nav-dd-btn { color: var(--cy-dk-accent); }
[data-theme="dark"] .nav-toggle span { background: var(--cy-dk-text); }
[data-theme="dark"] .nav-dd-menu { background: var(--cy-dk-surface); border-color: var(--cy-dk-border); box-shadow: 0 12px 32px rgba(0,0,0,.5); }
[data-theme="dark"] .nav-dd-menu a:hover, [data-theme="dark"] .nav-dd-menu a:focus-visible,
[data-theme="dark"] .nav-dd-menu a[aria-current="page"] { background: var(--cy-dk-raised); }
[data-theme="dark"] .nav-dd-menu .dd-ic { background: var(--cy-dk-raised); border-color: #33507A; }
[data-theme="dark"] .nav-dd-menu strong { color: var(--cy-dk-head); }
[data-theme="dark"] .nav-dd-menu small { color: var(--cy-dk-muted); }
@media (max-width: 820px) {
  [data-theme="dark"] .nav-links { background: var(--cy-dk-surface); border-bottom-color: var(--cy-dk-border); }
  [data-theme="dark"] .nav-dd-menu { background: transparent; box-shadow: none; border: 0; }
}

/* ---------- Heroes, banners, sections ---------- */
[data-theme="dark"] .hero, [data-theme="dark"] .page-banner {
  background: linear-gradient(180deg, #0B1626 0%, var(--cy-dk-bg-alt) 100%); border-bottom-color: var(--cy-dk-border); }
[data-theme="dark"] .hero::after { background: radial-gradient(circle at 85% 8%, rgba(121,210,238,.12), transparent 48%); }
[data-theme="dark"] .page-banner::after { background: radial-gradient(circle at 88% 12%, rgba(121,210,238,.10), transparent 50%); }
[data-theme="dark"] .home .section-white { background: var(--cy-dk-bg); }
[data-theme="dark"] .home .section-tint { background: var(--cy-dk-bg-alt); border-color: var(--cy-dk-border); }
[data-theme="dark"] .home .section-cta { background: linear-gradient(180deg, var(--cy-dk-bg) 0%, var(--cy-dk-bg-alt) 100%); }
[data-theme="dark"] .stats, [data-theme="dark"] .home .stats { background: #0A1422; border-top: 1px solid var(--cy-dk-border); border-bottom: 1px solid var(--cy-dk-border); }

/* ---------- Cards, icons, badges, buttons ---------- */
[data-theme="dark"] .cy-card, [data-theme="dark"] .home .cy-card {
  background: var(--cy-dk-surface); border-color: var(--cy-dk-border); box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); }
[data-theme="dark"] .cy-card:hover { box-shadow: 0 14px 36px rgba(0,0,0,.45); }
[data-theme="dark"] .cy-card p, [data-theme="dark"] .home .cy-card p { color: var(--cy-dk-text-2); }
[data-theme="dark"] .home .cy-card.accent, [data-theme="dark"] .home .solution-card { border-top-color: var(--cy-primary); }
[data-theme="dark"] .ic, [data-theme="dark"] .home .ic, [data-theme="dark"] .solution-card .ic { background: var(--cy-dk-raised); border-color: #33507A; }
[data-theme="dark"] .ic img, [data-theme="dark"] .nav-dd-menu .dd-ic img, [data-theme="dark"] .post-meta img { filter: brightness(1.55) saturate(.9); }
[data-theme="dark"] .cy-badge, [data-theme="dark"] .home .cy-badge:not(.cy-badge-qubit) { background: var(--cy-dk-raised); color: var(--cy-dk-accent); border-color: #33507A; }
[data-theme="dark"] .home .cy-badge-qubit { background: #2B5A9C; color: #fff; }
[data-theme="dark"] .cy-btn-ghost, [data-theme="dark"] .home .cy-btn-ghost { background: transparent; color: var(--cy-dk-accent); border-color: #4A78B8; }
[data-theme="dark"] .cy-btn-ghost:hover { background: var(--cy-dk-raised); border-color: var(--cy-dk-accent); }

/* ---------- Lists, panels, tables ---------- */
[data-theme="dark"] .check-list, [data-theme="dark"] .solution-card .check-list { color: var(--cy-dk-text); }
[data-theme="dark"] .check-list li::before { color: var(--cy-dk-accent); }
[data-theme="dark"] .cy-surface-horizon .check-list { color: #E4EFFC; }
[data-theme="dark"] .cy-surface-horizon .check-list li::before { color: var(--cy-cyan-300); }
[data-theme="dark"] .kpi-panel { background: var(--cy-dk-surface); color: var(--cy-dk-text); border-color: #33507A; box-shadow: 0 14px 36px rgba(0,0,0,.5); }
[data-theme="dark"] .hero-visual .kpi-pue { border-right-color: var(--cy-dk-border); }
[data-theme="dark"] .kpi-big { color: var(--cy-dk-accent); }
[data-theme="dark"] .kpi-table-wrap, [data-theme="dark"] .diagram-card, [data-theme="dark"] .home .pipe-schematic {
  background: var(--cy-dk-surface); border-color: var(--cy-dk-border); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
[data-theme="dark"] .kpi-table th, [data-theme="dark"] .kpi-table td { color: var(--cy-dk-text-2); border-bottom-color: var(--cy-dk-border); }
[data-theme="dark"] .kpi-table thead th { background: #0A1422; color: #fff; }
[data-theme="dark"] .kpi-table tbody th { color: var(--cy-dk-head); }
[data-theme="dark"] .kpi-tag { background: var(--cy-dk-raised); color: var(--cy-dk-accent); }
[data-theme="dark"] .table-note { color: var(--cy-dk-muted); }
[data-theme="dark"] .pipeline .step { background: var(--cy-dk-surface); }
[data-theme="dark"] .pipeline .step strong { color: var(--cy-dk-head); }

/* ---------- Illustrations & diagrams ----------
   The inline SVGs are drawn for light backgrounds. Inverting them and rotating the hue
   back by 180° gives a "night" rendering that keeps the brand blues. */
[data-theme="dark"] .dc-hero,
[data-theme="dark"] .dc-map,
[data-theme="dark"] .pipe-schematic svg { filter: invert(.92) hue-rotate(180deg) saturate(1.1); }
[data-theme="dark"] .dc-hero { box-shadow: 0 12px 32px rgba(0,0,0,.45); }
/* partner logos have dark wordmarks: show them on light chips */
[data-theme="dark"] .partners img { background: #fff; padding: 8px 14px; border-radius: var(--cy-radius-md); box-sizing: content-box; }

/* ---------- Blog, forms, legal ---------- */
[data-theme="dark"] .post-meta { color: var(--cy-dk-muted); }
[data-theme="dark"] .field label { color: var(--cy-dk-text-2); }
[data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea {
  background: var(--cy-dk-bg); color: var(--cy-dk-text); border-color: #33507A; }
[data-theme="dark"] .field input::placeholder, [data-theme="dark"] .field textarea::placeholder { color: #7F90A8; }
[data-theme="dark"] .prose p, [data-theme="dark"] .prose li { color: var(--cy-dk-text-2); }
[data-theme="dark"] .legal-table th { background: var(--cy-dk-raised); color: var(--cy-dk-head); }
[data-theme="dark"] .legal-table th, [data-theme="dark"] .legal-table td { border-bottom-color: var(--cy-dk-border); }
[data-theme="dark"] .legal-toc { background: var(--cy-dk-surface); border-color: var(--cy-dk-border); }

/* ---------- Footer & cookie banner ---------- */
[data-theme="dark"] .site-footer { background: #0A1422; border-top: 1px solid var(--cy-dk-border); }
[data-theme="dark"] .site-footer a { color: var(--cy-dk-text-2); }
[data-theme="dark"] .site-footer a:hover { color: #fff; }
[data-theme="dark"] .cookie-banner { background: var(--cy-dk-surface); border-color: var(--cy-dk-border); }
[data-theme="dark"] .cookie-banner p { color: var(--cy-dk-text-2); }
[data-theme="dark"] .ic img[src*="swiss-flag"] { filter: none; }