/* ============================================================
   MTS DESIGN TOKENS — /assets/css/variables.css
   Source of truth for all brand colors, typography, spacing,
   and motion variables. Do not override in page-level CSS.
   ============================================================ */

:root {
  /* --- COLOR: Brand Accents --- */
  --orange:         #FF6A2A;   /* Primary CTA / highlight */
  --orange-soft:    #F28C28;   /* Gradient companion */
  --blue:           #3ABFF8;   /* Section labels / icons */
  --blue-light:     #60C9FF;   /* Hover states / secondary accents */

  /* --- COLOR: Backgrounds --- */
  --navy:           #0F172A;   /* Primary background (deep navy) */
  --navy-mid:       #162032;   /* Section alternate background */
  --navy-card:      #1A2740;   /* Card background */
  --navy-border:    rgba(58, 191, 248, 0.12); /* Subtle border */

  /* --- COLOR: Text --- */
  --text-primary:   #F0F6FF;   /* Primary text */
  --text-muted:     #8DA4BE;   /* Body / secondary text */
  --text-dim: #7a7d84;   /* Tertiary / label text */

  /* --- TYPOGRAPHY --- */
  --font-display:   'Outfit', sans-serif;    /* Headlines / UI labels */
  --font-body:      'DM Sans', sans-serif;   /* Body / nav / buttons */

  /* --- SHAPE --- */
  --radius:         12px;
  --radius-lg:      20px;

  /* --- MOTION --- */
  --transition:     0.3s cubic-bezier(0.4, 0, 0.2, 1);
}