/* ═══════════════════════════════════════════════════════
   RenuviaMD™ — Design Tokens
   Shared across: Practice Site, Patient Portal, Physician Portal
   Source: extracted from master files (patient-portal-merged-3, physician-v2-18, practice-site)
═══════════════════════════════════════════════════════ */

:root {
  /* ─── Backgrounds (dark theme, layered) ─── */
  --bg:     #060D09;
  --bg2:    #0A1410;
  --bg3:    #0E1C14;
  --bg4:    #13231A;
  --bg5:    #182D20;

  /* ─── Borders (translucent white layers) ─── */
  --border:  rgba(255,255,255,0.05);
  --border2: rgba(255,255,255,0.10);
  --border3: rgba(255,255,255,0.18);

  /* ─── Primary: Teal (actions, active states, GLP-1 program) ─── */
  --teal:   #0C8A7E;
  --teal2:  #12B5A6;
  --teal3:  rgba(12,138,126,0.10);
  --teal4:  rgba(12,138,126,0.22);

  /* ─── Accent: Gold (highlights, milestones, pricing) ─── */
  --gold:   #C9A84C;
  --gold2:  #E0BD6A;
  --gold3:  rgba(201,168,76,0.10);
  --gold4:  rgba(201,168,76,0.22);

  /* ─── Rose (BHRT / Women's Health program) ─── */
  --rose:   #8F3E60;
  --rose2:  #BB5C82;
  --rose3:  rgba(143,62,96,0.10);
  --rose4:  rgba(143,62,96,0.22);

  /* ─── Purple (Peptide / Advanced program) ─── */
  --purple:  #6B35C9;
  --purple2: #9B6EE8;
  --purple3: rgba(107,53,201,0.10);
  --purple4: rgba(107,53,201,0.22);

  /* ─── Amber (warnings, attention) ─── */
  --amber:  #C97A1A;
  --amber2: #E8A234;
  --amber3: rgba(201,122,26,0.10);

  /* ─── Text ─── */
  --cream:  #EAE5D9;
  --cream2: #B0A89C;
  --muted:  #7A8878;

  /* ─── Semantic ─── */
  --success:  #28C76A;
  --success3: rgba(40,199,106,0.10);
  --warn:     #C97A1A;
  --warn3:    rgba(201,122,26,0.10);
  --danger:   #D94040;
  --danger3:  rgba(217,64,64,0.10);
  --info:     #3B82F6;
  --info3:    rgba(59,130,246,0.10);

  /* ─── Typography ─── */
  --font-heading: 'Fraunces', serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* ─── Spacing scale ─── */
  --sp-2:  2px;
  --sp-4:  4px;
  --sp-6:  6px;
  --sp-8:  8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;

  /* ─── Radius ─── */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  10px;
  --r-xl:  13px;
  --r-pill: 20px;
  --r-round: 50%;

  /* ─── Shadows ─── */
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.3);
  --shadow-lg: 0 6px 20px rgba(0,0,0,0.4);

  /* ─── Transitions ─── */
  --ease-fast: 0.15s ease;
  --ease-med:  0.2s ease;
  --ease-slow: 0.3s ease;
  --ease-spring: 0.8s cubic-bezier(0.22,1,0.36,1);
}

/* ═══════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-heading); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--bg5); border-radius: 4px; }

a { color: var(--teal2); text-decoration: none; }
a:hover { color: var(--teal); }

/* ─── Utility classes ─── */
.text-xs   { font-size: 0.69rem; }
.text-sm   { font-size: 0.76rem; }
.text-base { font-size: 0.83rem; }
.text-lg   { font-size: 0.95rem; }
.text-xl   { font-size: 1.15rem; }
.text-2xl  { font-size: 1.35rem; }

.text-muted   { color: var(--muted); }
.text-cream2  { color: var(--cream2); }
.text-teal    { color: var(--teal2); }
.text-gold    { color: var(--gold2); }
.text-rose    { color: var(--rose2); }
.text-purple  { color: var(--purple2); }
.text-success { color: var(--success); }
.text-warn    { color: var(--warn); }
.text-danger  { color: var(--danger); }

.font-heading { font-family: var(--font-heading); }
.font-mono    { font-family: var(--font-mono); }
.font-bold    { font-weight: 700; }

.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.items-center   { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.gap-4  { gap: 4px; }
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }

.w-full { width: 100%; }
.hidden { display: none; }