/* ================================================
   AEO-REX MASTER STYLESHEET
   Single source of truth for all design tokens.
   Load LAST on every page to ensure consistency.
   ================================================ */

:root {
  /* Colours — from homepage index.html */
  --color-bg: #0a0a12;
  --color-primary: #00e5ff;
  --color-primary-dim: rgba(0, 229, 255, 0.12);
  --color-primary-glow: rgba(0, 229, 255, 0.35);
  --color-red: #e94560;
  --color-text: #e8e8ec;
  --color-text-secondary: #7a7a8e;
  --color-card-bg: #12121e;
  --color-card-border: rgba(0, 229, 255, 0.08);
  --color-success: #22c55e;
  --color-warning: #f59e0b;

  /* Typography — from homepage */
  --font-family: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --container-max-width: 1200px;
  --card-padding: 28px 24px;
  --border-radius-card: 16px;
  --border-radius-button: 10px;
}

/* ================================================
   GLOBAL FONT CONSISTENCY
   ================================================ */
body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
p, li, td, th, label, span, div,
button, input, select, textarea, a {
  font-family: var(--font-family);
}

code, pre, .mono,
[style*="JetBrains"],
[class*="mono"] {
  font-family: var(--font-mono);
}

/* ================================================
   RESPONSIVE TYPOGRAPHY
   ================================================ */
@media (min-width: 1024px) {
  .sec-title,
  .section-title {
    font-size: 36px;
  }
}

/* ================================================
   LINK STYLING
   ================================================ */
a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  opacity: 0.85;
}

/* ================================================
   MOBILE PERFORMANCE
   ================================================ */

html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

html {
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
  height: auto;
}

/* Prevent iOS zoom on input focus */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
    -webkit-appearance: none;
  }

  /* Touch targets 44px minimum */
  button, a, input, select, textarea {
    min-height: 44px;
  }

  /* Tables scroll on mobile */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Remove hover transforms on mobile */
  *:hover { transform: none !important; }
}

/* CLS prevention */
img { aspect-ratio: auto; }
.score-circle, [id*="ScoreRing"] { min-width: 150px; min-height: 150px; }