/* =====================================================
   Space 2.0 — VeloCoach Design Tokens
   High-end dark brand system. Off the AIM inheritance.
   Display: Space Grotesk · Body: Inter
   ===================================================== */

:root {
  /* --- VeloCoach brand palette --- */
  --vc-cyan:        #00C8FF;
  --vc-cyan-hover:  #0AA2CC;
  --vc-cyan-soft:   rgba(0, 200, 255, 0.12);
  --vc-cyan-glow:   rgba(0, 200, 255, 0.28);

  --bg:             #050816;   /* deep navy page background */
  --bg-2:           #070B1D;   /* slightly raised background band */
  --surface:        #0B1226;   /* card */
  --surface-2:      #111B36;   /* elevated card / hover */
  --surface-3:      #16223f;   /* inputs, tracks */

  --text-strong:    #F4F8FF;   /* headings / metrics */
  --text:           #E7ECF3;   /* body */
  --text-muted:     #A7B3C5;   /* secondary slate */
  --text-dim:       #6B7A93;   /* tertiary */

  --green:          #37D67A;   --green-soft:  rgba(55, 214, 122, 0.13);
  --orange:         #FF6B2C;   --orange-soft: rgba(255, 107, 44, 0.13);
  --red:            #FF4D5A;   --red-soft:    rgba(255, 77, 90, 0.13);
  --violet:         #9B8CFF;   --violet-soft: rgba(155, 140, 255, 0.13);

  --hairline:       rgba(167, 179, 197, 0.12);
  --hairline-soft:  rgba(167, 179, 197, 0.07);
  --hairline-strong:rgba(167, 179, 197, 0.20);

  /* --- Typography --- */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 70px rgba(0,0,0,0.55);
  --shadow-glow: 0 10px 40px rgba(0,200,255,0.18);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.45s;

  /* ==========================================================
     Legacy aliases (AIM class names + inline styles still map)
     Keeps every existing var(--sky)/var(--navy)/... working
     against the new brand. Do not remove.
     ========================================================== */
  --navy:          var(--surface);
  --navy-deep:     var(--bg);
  --navy-line:     var(--hairline);
  --navy-soft:     var(--surface-2);
  --navy-card:     var(--surface);

  --sky:           var(--vc-cyan);
  --sky-soft:      var(--vc-cyan-soft);
  --sky-deep:      var(--vc-cyan-hover);
  --teal:          var(--vc-cyan-hover);

  --white:         var(--text-strong);
  --light-grey:    var(--text);
  --muted:         var(--text-muted);
  --muted-soft:    var(--text-dim);

  --amber:         var(--orange);
  --amber-soft:    var(--orange-soft);
  --success:       var(--green);
  --success-soft:  var(--green-soft);
  --danger:        var(--red);
  --danger-soft:   var(--red-soft);
  --ok:            var(--green);
  --red-legacy:    var(--red);

  --health-green:  var(--green);
  --health-amber:  var(--orange);
  --health-red:    var(--red);
  --health-grey:   var(--text-muted);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient brand aura behind the whole app */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 600px at 78% -8%, rgba(0,200,255,0.10), transparent 60%),
    radial-gradient(900px 520px at -6% 8%, rgba(155,140,255,0.07), transparent 55%),
    radial-gradient(700px 700px at 50% 120%, rgba(55,214,122,0.05), transparent 60%);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em 0;
  line-height: 1.15;
}
h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
h3 { font-size: 1.08rem; letter-spacing: -0.01em; }
h4 { font-size: 0.95rem; }

p { margin: 0 0 1em 0; }
a { color: var(--vc-cyan); text-decoration: none; transition: color 0.15s var(--ease); }
a:hover { color: var(--vc-cyan-hover); }

code { font-family: 'SFMono-Regular', ui-monospace, Menlo, monospace; font-size: 0.85em; background: var(--surface-3); padding: 1px 6px; border-radius: 5px; color: var(--vc-cyan); }

::selection { background: var(--vc-cyan-glow); color: #fff; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 20px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Pill ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--vc-cyan-soft);
  color: var(--vc-cyan);
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill.amber   { background: var(--orange-soft); color: var(--orange); }
.pill.success { background: var(--green-soft);  color: var(--green); }
.pill.danger  { background: var(--red-soft);    color: var(--red); }
.pill.muted   { background: rgba(167,179,197,0.10); color: var(--text-muted); }

/* ---- Card ---- */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin: 14px 0;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { border-color: var(--hairline-strong); }
.card h3 { color: var(--text-strong); margin-top: 0; }

/* ---- Button ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.18s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { border-color: var(--vc-cyan); color: var(--text-strong); background: var(--surface-3); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: linear-gradient(135deg, var(--vc-cyan) 0%, var(--vc-cyan-hover) 100%);
  border-color: transparent; color: #041018; font-weight: 700;
}
.btn.primary:hover { box-shadow: var(--shadow-glow); color: #041018; }
.btn.ghost { background: transparent; }
.btn.success { border-color: var(--green-soft); color: var(--green); }
.btn.success:hover { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.btn.sm { padding: 6px 13px; font-size: 0.74rem; border-radius: var(--radius-sm); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
}