/* =====================================================
   Space — Design Tokens
   Extracted from: AIM Customer Onboarding Plan.html
   Source of truth for the whole CS Dashboard suite.
   ===================================================== */

:root {
  /* --- Palette --- */
  --navy:          #1B2A4A;
  --navy-deep:     #101b33;
  --navy-line:     #2a3a5c;
  --navy-soft:     #223253;

  --sky:           #38b6ff;
  --sky-soft:      rgba(56, 182, 255, 0.12);
  --sky-deep:      #1f7bb8;
  --teal:          #206987;

  --white:         #FFFFFF;
  --light-grey:    #E0E8F0;
  --muted:         #9FB0C8;
  --muted-soft:    #6b7c94;

  --amber:         #F5B642;
  --amber-soft:    rgba(245, 182, 66, 0.12);
  --success:       #4ECB71;
  --success-soft:  rgba(78, 203, 113, 0.12);
  --danger:        #E05B5B;
  --danger-soft:   rgba(224, 91, 91, 0.12);

  /* --- Typography --- */
  --font-heading:  'Montserrat', sans-serif;
  --font-body:     'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Scale --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 8px 24px rgba(56,182,255,0.15);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.55);

  /* --- Health status colours --- */
  --health-green:  var(--success);
  --health-amber:  var(--amber);
  --health-red:    var(--danger);
  --health-grey:   var(--muted);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 20px; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--navy-deep);
  color: var(--light-grey);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--white);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em 0;
}
h1 { font-size: 2.6rem; line-height: 1.15; }
h2 { font-size: 1.9rem; line-height: 1.2; }
h3 { font-size: 1.25rem; letter-spacing: 0.01em; }
h4 { font-size: 1.05rem; color: var(--sky); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

p { margin: 0 0 1em 0; }
a { color: var(--sky); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Universal pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-heading);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--sky-soft);
  color: var(--sky);
}
.pill.amber   { background: var(--amber-soft);   color: var(--amber); }
.pill.success { background: var(--success-soft); color: var(--success); }
.pill.danger  { background: var(--danger-soft);  color: var(--danger); }
.pill.muted   { background: rgba(159,176,200,0.1); color: var(--muted); }

/* Generic card */
.card {
  background: var(--navy);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin: 16px 0;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: var(--sky); }
.card h3 { color: var(--white); 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(--navy-line);
  background: var(--navy);
  color: var(--light-grey);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.btn:hover { border-color: var(--sky); color: var(--white); background: var(--navy-soft); text-decoration: none; }
.btn.primary { background: linear-gradient(135deg, var(--sky) 0%, var(--sky-deep) 100%); border-color: var(--sky); color: var(--white); }
.btn.primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 12px; font-size: 0.72rem; }

.btn-icon {
  width: 16px; height: 16px;
  display: inline-block;
}