/* ExoTorque AI design tokens. Soft-launch v2, not final, pending trademark clearance. © 2026 Northern Horizons Group LLC */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&family=Mona+Sans:wdth,wght@112.5..125,500..800&display=swap');

:root {
  /* brand palette */
  --xt-ion-cyan: #19E3FF;  /* Signature accent: logo core, primary buttons on dark, links and focus on dark, highlights. Never body text on light. */
  --xt-graphite: #0E1116;  /* Primary background (dark-first brand). Text on Ion Cyan buttons. Body text on light. */
  --xt-slate: #1C232D;  /* Raised surfaces on dark: cards, nav, inputs, dividers. */
  --xt-steel: #8A96A3;  /* Secondary/muted text on dark, icons, borders. Not for body text on white (3.01:1). */
  --xt-frost: #F4F7FA;  /* Primary text on dark; light-mode page background. */
  --xt-ion-deep: #0091AD;  /* Logo core and graphic accents on light backgrounds (3.71:1 on white, non-text). */
  --xt-ion-ink: #007A92;  /* Links, primary buttons and focus rings on light backgrounds (5.00:1 on white). */

  /* type */
  --xt-font-heading: 'Mona Sans', 'Inter', system-ui, sans-serif;
  --xt-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --xt-heading-wdth: 125%;     /* Mona Sans Expanded: use as font-stretch */
  --xt-heading-wght: 600;      /* SemiBold */

  /* semantic: dark is the default brand mode */
  --xt-bg: #0E1116;
  --xt-surface: #1C232D;
  --xt-text: #F4F7FA;
  --xt-text-muted: #8A96A3;
  --xt-link: #19E3FF;
  --xt-button-bg: #19E3FF;
  --xt-button-text: #0E1116;
  --xt-button-bg-hover: #7AEEFF;
  --xt-focus-ring: #19E3FF;
  --xt-radius: 10px;
  --xt-ion-tile: linear-gradient(135deg, #0A4A5A 0%, #0091AD 100%);  /* avatars + app icons only */
  --xt-focus: 0 0 0 2px var(--xt-bg), 0 0 0 4px var(--xt-focus-ring);
}

.xt-light, [data-theme="light"] {
  --xt-bg: #F4F7FA;
  --xt-surface: #FFFFFF;
  --xt-text: #0E1116;
  --xt-text-muted: #5A6572;
  --xt-link: #007A92;
  --xt-button-bg: #007A92;
  --xt-button-text: #FFFFFF;
  --xt-button-bg-hover: #00687D;
  --xt-focus-ring: #007A92;
}

body { background: var(--xt-bg); color: var(--xt-text); font-family: var(--xt-font-body); font-size: 17px; line-height: 1.55; }
h1, h2, h3 { font-family: var(--xt-font-heading); font-stretch: 125%; font-weight: var(--xt-heading-wght); }
h1 { font-size: 56px; line-height: 1.05; letter-spacing: 0.01em; }
h2 { font-size: 40px; line-height: 1.1; letter-spacing: 0.01em; }
h3 { font-size: 28px; line-height: 1.2; }
a { color: var(--xt-link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
.xt-btn { background: var(--xt-button-bg); color: var(--xt-button-text); font: 600 16px/1 var(--xt-font-body); border: 0; border-radius: var(--xt-radius); padding: 14px 22px; }
.xt-btn:hover { background: var(--xt-button-bg-hover); }
:where(a, button, .xt-btn, input, select, textarea):focus-visible { outline: none; box-shadow: var(--xt-focus); }