/* ============================================================
   Cyclops Labs GmbH — Master brand theme
   Depends on design tokens + fonts (imported below for standalone use).
   Use the .cy- classes, or just inherit the base typography & colors.
   ============================================================ */


/* ---------- Base / reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

body.cy, .cy-root {
  margin: 0;
  font-family: var(--cy-font-body);
  font-size: var(--cy-fs-body);
  line-height: var(--cy-lh-body);
  color: var(--cy-ink-900);
  background: var(--cy-mist);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Typography ---------- */
.cy-root h1, .cy-root h2, .cy-root h3, .cy-root h4, .cy-root h5,
.cy-display, .cy-h1, .cy-h2, .cy-h3, .cy-h4 {
  font-family: var(--cy-font-display);
  font-weight: 600;
  line-height: var(--cy-lh-tight);
  letter-spacing: var(--cy-ls-display);
  color: var(--cy-navy);
  margin: 0 0 var(--cy-space-4);
}
.cy-display { font-size: var(--cy-fs-display); font-weight: 700; }
.cy-h1, .cy-root h1 { font-size: var(--cy-fs-h1); }
.cy-h2, .cy-root h2 { font-size: var(--cy-fs-h2); }
.cy-h3, .cy-root h3 { font-size: var(--cy-fs-h3); }
.cy-h4, .cy-root h4 { font-size: var(--cy-fs-h4); }

.cy-lead { font-size: var(--cy-fs-body-lg); color: var(--cy-ink-400); line-height: var(--cy-lh-snug); }
.cy-eyebrow {
  font-family: var(--cy-font-display);
  font-weight: 600; font-size: var(--cy-fs-caption);
  letter-spacing: var(--cy-ls-caps); text-transform: uppercase;
  color: var(--cy-primary);
}
.cy-mono { font-family: var(--cy-font-mono); font-variant-ligatures: none; }
a { color: var(--cy-primary); text-decoration: none; transition: color var(--cy-dur) var(--cy-ease); }
a:hover { color: var(--cy-primary-hover); }

/* Gradient text — for hero key phrases */
.cy-text-gradient {
  background: var(--cy-grad-horizon);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Buttons — squared, smooth, polished ---------- */
.cy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cy-space-2);
  font-family: var(--cy-font-display); font-weight: 600; font-size: var(--cy-fs-body);
  line-height: 1; letter-spacing: 0.005em;
  padding: 0.85em 1.7em; border-radius: var(--cy-radius-btn);
  border: 1.5px solid transparent; cursor: pointer; text-align: center;
  will-change: transform;
  transition: transform var(--cy-dur) var(--cy-ease),
              box-shadow var(--cy-dur) var(--cy-ease),
              background-color var(--cy-dur) var(--cy-ease),
              border-color var(--cy-dur) var(--cy-ease),
              filter var(--cy-dur) var(--cy-ease);
}
.cy-btn:hover { transform: translateY(-2px); }
.cy-btn:active { transform: translateY(0); transition-duration: var(--cy-dur-fast); }
.cy-btn:focus-visible { outline: none; box-shadow: var(--cy-shadow-glow); }

.cy-btn-primary { background: var(--cy-primary); color: var(--cy-white); box-shadow: var(--cy-shadow-sm); }
.cy-btn-primary:hover { background: var(--cy-primary-hover); box-shadow: var(--cy-shadow-md); }

.cy-btn-gradient { background: var(--cy-grad-horizon); color: var(--cy-white); box-shadow: var(--cy-shadow-md); }
.cy-btn-gradient:hover { box-shadow: var(--cy-shadow-lg); filter: brightness(1.04); }

.cy-btn-ghost { background: transparent; color: var(--cy-primary); border-color: var(--cy-sky); }
.cy-btn-ghost:hover { background: var(--cy-blue-50); border-color: var(--cy-primary); }

/* ---------- Cards & surfaces ---------- */
.cy-card {
  background: var(--cy-white);
  border: 1px solid var(--cy-ink-100);
  border-radius: var(--cy-radius-lg);
  padding: var(--cy-space-6);
  box-shadow: var(--cy-shadow-sm);
  transition: transform var(--cy-dur) var(--cy-ease), box-shadow var(--cy-dur) var(--cy-ease);
}
.cy-card:hover { transform: translateY(-3px); box-shadow: var(--cy-shadow-lg); }
.cy-card-cloud { background: var(--cy-grad-cloud); border-color: var(--cy-sky); }

.cy-surface-horizon {
  background: var(--cy-grad-horizon); color: var(--cy-white);
  border-radius: var(--cy-radius-xl); padding: var(--cy-space-12);
}
.cy-surface-horizon h1, .cy-surface-horizon h2, .cy-surface-horizon h3 { color: var(--cy-white); }

/* ---------- Badges / chips ---------- */
.cy-badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--cy-font-display); font-weight: 600; font-size: var(--cy-fs-caption);
  letter-spacing: var(--cy-ls-caps); text-transform: uppercase;
  padding: 0.35em 0.85em; border-radius: var(--cy-radius-pill);
  background: var(--cy-blue-50); color: var(--cy-primary); border: 1px solid var(--cy-blue-100);
}
.cy-badge-qubit { background: var(--cy-grad-qubit); color: var(--cy-white); border-color: transparent; }

/* ---------- Decorative ---------- */
.cy-divider { height: 1px; background: var(--cy-sky); border: 0; margin: var(--cy-space-8) 0; }
.cy-orbit-dot { /* a small qubit/eye accent */
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cy-grad-qubit); box-shadow: var(--cy-shadow-glow);
  display: inline-block;
}

/* ---------- Accessibility / motion ---------- */
:focus-visible { outline: 2px solid var(--cy-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}