/* Cypha design system — shared across the marketing site and this app so the two feel like one product. */

:root {
  /* Backgrounds */
  --bg:          #06101e;
  --bg2:         #0a1626;
  --bg3:         #0f1e33;
  --surface:     #0e1d31;

  /* Borders */
  --border:      #1c3452;
  --border2:     #25436b;

  /* Accent */
  --accent:      #0af5c0;
  --accent2:     #08d1a2;
  --accent-dark: #065b47;
  --accent-glow: rgba(10,245,192,.15);

  /* Text */
  --white:       #f2f6fa;
  --head:        #dae4ee;
  --body:        #8ba8be;
  --muted:       #5a748c;
  --dim:         #3d5470;

  /* Status colours */
  --success:     #22c55e;
  --warning:     #f59e0b;
  --error:       #ef4444;
  --info:        #3b82f6;

  /* Transitions */
  --ease:        cubic-bezier(.16,1,.3,1);

  /* Legacy aliases — every existing template/CSS rule in the app already references these
     names, so redefining them here (instead of renaming every call site) is what makes the
     whole app repaint with the new palette. */
  --surface-elevated: var(--bg3);
  --text-primary:      var(--white);
  --text-secondary:    var(--body);
  --text-muted:        var(--muted);
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Headings — Space Grotesk */
h1, h2, h3, h4, h5, h6,
.heading, .display, .nav-logo,
.stat-number, .stat-value, .page-title,
.topbar-title, .modal-title, .modal-header h3,
.section-title {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* Monospace — labels, badges, code, eyebrows */
.label, .badge, .tag, .mono,
.stat-label, .nav-eyebrow, label,
code, pre, .form-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Eyebrows and section headers */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--accent);
}

.section-title {
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* Utility classes */
.text-accent  { color: var(--accent); }
.text-muted   { color: var(--muted); }
.text-head    { color: var(--head); }
.text-white   { color: var(--white); }
.text-success { color: var(--success); }
.text-error   { color: var(--error); }
.text-warning { color: var(--warning); }

.bg-surface   { background: var(--surface); }
.bg-bg2       { background: var(--bg2); }

.border-default { border: 1px solid var(--border); }
.border-accent  { border: 1px solid rgba(10,245,192,.25); }

.rounded-sm  { border-radius: 6px; }
.rounded-md  { border-radius: 8px; }
.rounded-lg  { border-radius: 12px; }
.rounded-xl  { border-radius: 14px; }
.rounded-full { border-radius: 99px; }

/* Scrollbar */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--bg); }
::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border2); }

/* Selection */
::selection {
  background: rgba(10,245,192,.18);
  color: var(--white);
}