/* ============================================================
   Audexia Design System — colors_and_type.css
   Voice infrastructure for clinical teams.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: Slate (primary palette) ---------- */
  --aud-ink:        #0f172a;   /* headlines, primary text, dark CTAs */
  --aud-slate-800:  #1e293b;   /* nav backgrounds, dark sections */
  --aud-slate-700:  #334155;   /* secondary dark, card headers */
  --aud-brand:      #475569;   /* BRAND — logo accent, borders, links */
  --aud-slate-500:  #64748b;   /* body text secondary */
  --aud-slate-400:  #94a3b8;   /* placeholder, disabled, muted */
  --aud-slate-200:  #e2e8f0;   /* borders, dividers */
  --aud-slate-100:  #f1f5f9;   /* input bg, tags, chips */
  --aud-surface:    #f8fafc;   /* page background */
  --aud-white:      #ffffff;   /* card surfaces, modals */

  /* ---------- Color: Action (interactive sky) ---------- */
  --aud-action:     #0284c7;
  --aud-action-lt:  #e0f2fe;

  /* ---------- Color: Semantic ---------- */
  --aud-success:    #059669;
  --aud-success-lt: #d1fae5;
  --aud-success-fg: #065f46;
  --aud-warn:       #d97706;
  --aud-warn-lt:    #fef3c7;
  --aud-warn-fg:    #92400e;
  --aud-error:      #dc2626;
  --aud-error-lt:   #fee2e2;
  --aud-error-fg:   #991b1b;
  --aud-info:       #0369a1;
  --aud-info-lt:    #e0f2fe;

  /* ---------- Foreground / background semantic aliases ---------- */
  --aud-fg-1:       var(--aud-ink);        /* primary text */
  --aud-fg-2:       var(--aud-slate-700);  /* secondary text */
  --aud-fg-3:       var(--aud-slate-500);  /* tertiary / meta */
  --aud-fg-muted:   var(--aud-slate-400);  /* placeholder / disabled */
  --aud-bg-1:       var(--aud-white);      /* card surface */
  --aud-bg-2:       var(--aud-surface);    /* page bg */
  --aud-bg-3:       var(--aud-slate-100);  /* inset / chip bg */
  --aud-border:     var(--aud-slate-200);
  --aud-border-strong: var(--aud-slate-400);

  /* ---------- Type: families ---------- */
  --aud-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --aud-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type: scale (token vars) ---------- */
  --aud-text-display: 32px;
  --aud-text-h1:      24px;
  --aud-text-h2:      18px;
  --aud-text-h3:      15px;
  --aud-text-body:    15px;
  --aud-text-small:   13px;
  --aud-text-micro:   11px;
  --aud-text-mono:    13px;

  /* ---------- Spacing (8pt grid + 4 increments) ---------- */
  --aud-space-1:  4px;
  --aud-space-2:  8px;
  --aud-space-3:  12px;
  --aud-space-4:  16px;
  --aud-space-6:  24px;
  --aud-space-8:  32px;
  --aud-space-12: 48px;
  --aud-space-16: 64px;
  --aud-space-24: 96px;

  /* ---------- Radius ---------- */
  --aud-radius-xs:   6px;   /* tags, chips */
  --aud-radius-sm:   8px;   /* inputs, buttons */
  --aud-radius-md:  12px;   /* cards, panels */
  --aud-radius-lg:  16px;   /* modals, sheets */
  --aud-radius-pill: 999px;

  /* ---------- Borders ---------- */
  --aud-border-default: 0.5px solid var(--aud-border);
  --aud-border-emphasis: 1px solid var(--aud-border-strong);
  --aud-border-accent:  2px solid var(--aud-brand);

  /* ---------- Shadows (low-key, infrastructure-grade) ---------- */
  --aud-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --aud-shadow-2: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --aud-shadow-3: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --aud-focus-ring: 0 0 0 3px rgba(71, 85, 105, 0.18);
}

/* ============================================================
   Semantic typography classes
   ============================================================ */

.aud-display {
  font-family: var(--aud-font-sans);
  font-size: var(--aud-text-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--aud-fg-1);
}
.aud-h1 {
  font-family: var(--aud-font-sans);
  font-size: var(--aud-text-h1);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--aud-fg-1);
}
.aud-h2 {
  font-family: var(--aud-font-sans);
  font-size: var(--aud-text-h2);
  font-weight: 500;
  line-height: 1.35;
  color: var(--aud-fg-1);
}
.aud-h3 {
  font-family: var(--aud-font-sans);
  font-size: var(--aud-text-h3);
  font-weight: 500;
  line-height: 1.45;
  color: var(--aud-fg-1);
}
.aud-body {
  font-family: var(--aud-font-sans);
  font-size: var(--aud-text-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--aud-fg-2);
}
.aud-small {
  font-family: var(--aud-font-sans);
  font-size: var(--aud-text-small);
  font-weight: 400;
  line-height: 1.6;
  color: var(--aud-fg-3);
}
.aud-micro {
  font-family: var(--aud-font-sans);
  font-size: var(--aud-text-micro);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--aud-fg-3);
}
.aud-mono {
  font-family: var(--aud-font-mono);
  font-size: var(--aud-text-mono);
  font-weight: 400;
  color: var(--aud-fg-2);
  font-feature-settings: "tnum";
}

/* ============================================================
   Base resets — apply to .aud-root scope so we don't pollute hosts
   ============================================================ */

.aud-root {
  font-family: var(--aud-font-sans);
  color: var(--aud-fg-1);
  background: var(--aud-bg-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.aud-root * { box-sizing: border-box; }