/* tokens.css — A!thera Partners brand design tokens (verbatim from visual-system) */

:root {
  /* Primary palette */
  --athera-blue: #5fb8d6;
  --athera-blue-light: #a8d9ec;
  --athera-blue-deep: #2a8fb0;
  --athera-charcoal: #374151;
  --athera-charcoal-light: #4b5563;
  --athera-grey: #6b7280;
  --athera-grey-light: #9ca3af;
  --athera-navy: #0f172a;
  --athera-navy-mid: #1e2b42;

  /* Surfaces */
  --athera-white: #ffffff;
  --athera-off-white: #f8f7f4;
  --athera-surface: #f1eee8;

  /* Extended palette */
  --athera-amber: #c8955a;
  --athera-amber-light: #e8c49a;
  --athera-steel: #8aa5be;
  --athera-mist: #d4dfe8;

  /* Lines */
  --athera-line: rgba(55, 65, 81, 0.12);
  --athera-line-light: rgba(55, 65, 81, 0.06);
  --athera-line-dark: rgba(255, 255, 255, 0.08);
  --athera-line-dark-light: rgba(255, 255, 255, 0.06);

  /* Typography */
  --athera-display: 'Cormorant Garamond', Georgia, serif;
  --athera-sans: 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --athera-mono: 'DM Mono', 'Consolas', 'Monaco', monospace;

  /* Spacing scale */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 80px;
  --sp-8: 120px;

  /* Status (used with icon/label, never colour alone) */
  --status-high: #b4633f; /* warm warning, derived from amber family but darker for contrast */
  --status-high-bg: rgba(200, 149, 90, 0.12);
  --status-medium: #b07d34;
  --status-medium-bg: rgba(200, 149, 90, 0.1);
  --status-low: #3f7d6a; /* calm positive */
  --status-low-bg: rgba(63, 125, 106, 0.1);

  --radius: 4px;
  --radius-sm: 2px;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 14px 40px -18px rgba(15, 23, 42, 0.28);
  --header-h: 132px;
}

/* ---- Type scale ---- */
.athera-display-xl {
  font-family: var(--athera-display);
  font-size: clamp(56px, 9vw, 116px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.athera-display-lg {
  font-family: var(--athera-display);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.015em;
}
.athera-display-md {
  font-family: var(--athera-display);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.athera-display-sm {
  font-family: var(--athera-display);
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 400;
  line-height: 1.2;
}
.athera-body-lg {
  font-family: var(--athera-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--athera-charcoal-light);
}
.athera-body {
  font-family: var(--athera-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--athera-charcoal);
}
.athera-body-sm {
  font-family: var(--athera-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--athera-grey);
}
.athera-label {
  font-family: var(--athera-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--athera-grey);
}
.athera-label-blue {
  font-family: var(--athera-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--athera-blue-deep);
}
.athera-mono {
  font-family: var(--athera-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--athera-grey-light);
}