/* ─────────────────────────────────────────────────────────
   aetherDx — Design Tokens & Reset
   Healytix visual identity: pale lilac, indigo CTAs, magenta accents
   ───────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Color palette ── */
  --color-bg:          #F4F1FB;
  --color-bg-card:     #FDFCFE;
  --color-bg-sidebar:  #FDFCFE;
  --color-bg-input:    #FFFFFF;

  --color-text:        #0E0E1A;
  --color-text-muted:  #6B6880;
  --color-text-light:  #9A96B0;

  --color-primary:     #5B4DE8;
  --color-primary-hover: #4A3DD6;
  --color-primary-light: #EDE9FD;

  --color-border:      rgba(91, 77, 232, 0.12);
  --color-border-soft: rgba(14, 14, 26, 0.08);

  --color-success:     #16A34A;
  --color-success-bg:  #DCFCE7;
  --color-warning:     #D97706;
  --color-warning-bg:  #FEF3C7;
  --color-error:       #DC2626;
  --color-error-bg:    #FEE2E2;
  --color-info:        #2563EB;
  --color-info-bg:     #DBEAFE;

  /* ── Magenta accent (emphasis words only) ── */
  --gradient-magenta: linear-gradient(135deg, #E8487B 0%, #C026D3 100%);
  --gradient-indigo:  linear-gradient(135deg, #5B4DE8 0%, #7C3AED 100%);
  --gradient-bg: radial-gradient(ellipse at 90% 5%, rgba(232, 72, 123, 0.07) 0%, transparent 55%),
                 radial-gradient(ellipse at 5% 95%, rgba(91, 77, 232, 0.09) 0%, transparent 55%),
                 #F4F1FB;

  /* ── Typography ── */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Border radius ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(14, 14, 26, 0.06);
  --shadow-sm: 0 2px 6px rgba(14, 14, 26, 0.08), 0 1px 2px rgba(14, 14, 26, 0.04);
  --shadow-md: 0 4px 16px rgba(14, 14, 26, 0.10), 0 2px 4px rgba(14, 14, 26, 0.06);
  --shadow-lg: 0 8px 32px rgba(14, 14, 26, 0.12), 0 4px 8px rgba(14, 14, 26, 0.06);
  --shadow-primary: 0 4px 14px rgba(91, 77, 232, 0.30);

  /* ── Glass card system ── */
  --glass-bg: linear-gradient(155deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.62) 45%, rgba(255,255,255,0.46) 100%);
  --glass-blur: 20px;
  --glass-border: rgba(255,255,255,0.7);
  --color-border-card: rgba(14, 14, 26, 0.14);

  --shadow-card-rest:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 1px 2px rgba(14,14,26,0.05),
    0 16px 36px -12px rgba(14,14,26,0.24),
    0 3px 10px rgba(14,14,26,0.09);

  --shadow-card-hover:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,0.45),
    0 2px 4px rgba(14,14,26,0.06),
    0 26px 58px -14px rgba(91,77,232,0.34),
    0 8px 20px rgba(14,14,26,0.13);

  /* ── Transitions ── */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* ── Sidebar ── */
  --sidebar-width: 240px;
  --topbar-height: 60px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--gradient-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul, ol { list-style: none; }

/* ── Typography scale ── */
h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
h4 { font-size: 15px; font-weight: 600; line-height: 1.5; }
h5 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

p { line-height: 1.7; }

.text-muted  { color: var(--color-text-muted); }
.text-light  { color: var(--color-text-light); }
.text-small  { font-size: 12px; }
.text-xs     { font-size: 11px; }
.font-mono   { font-family: var(--font-mono); }

.accent-gradient {
  background: var(--gradient-magenta);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Utility ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex     { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.w-full { width: 100%; }