/* ============================================================
   CLINICAL PRECISION — Shared Design System
   "The Informed Calm" — ClassifierBT.com
   ============================================================ */

/* ---- Google Fonts ----------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ---- CSS Custom Properties (Design Tokens) ---------------- */
:root {
  /* Surface Hierarchy */
  --surface:                #f8f9ff;
  --surface-bright:         #f8f9ff;
  --surface-dim:            #cbdbf5;
  --surface-container-lowest:  #ffffff;
  --surface-container-low:     #eff4ff;
  --surface-container:         #e5eeff;
  --surface-container-high:    #dce9ff;
  --surface-container-highest: #d3e4fe;
  --surface-variant:           #d3e4fe;

  /* Brand Colors */
  --primary:            #004ac6;
  --primary-container:  #2563eb;
  --primary-fixed:      #dbe1ff;
  --primary-fixed-dim:  #b4c5ff;
  --inverse-primary:    #b4c5ff;
  --surface-tint:       #0053db;

  /* Secondary (Healing Teal) */
  --secondary:               #006a61;
  --secondary-container:     #86f2e4;
  --secondary-fixed:         #89f5e7;
  --secondary-fixed-dim:     #6bd8cb;

  /* Tertiary (Clinical Alert) */
  --tertiary:            #ac0031;
  --tertiary-container:  #d71142;
  --tertiary-fixed:      #ffdada;
  --tertiary-fixed-dim:  #ffb3b6;

  /* Text / On-surface */
  --on-surface:          #0b1c30;
  --on-surface-variant:  #434655;
  --on-primary:          #ffffff;
  --on-secondary:        #ffffff;
  --on-tertiary:         #ffffff;
  --on-background:       #0b1c30;
  --on-primary-container: #eeefff;
  --on-secondary-container: #006f66;
  --on-tertiary-container:  #ffecec;
  --inverse-surface:     #213145;
  --inverse-on-surface:  #eaf1ff;

  /* Outline */
  --outline:         #737686;
  --outline-variant: #c3c6d7;

  /* Error */
  --error:           #ba1a1a;
  --error-container: #ffdad6;
  --on-error:        #ffffff;
  --on-error-container: #93000a;

  /* Background */
  --background: #f8f9ff;

  /* Typography */
  --font-headline: 'Manrope', sans-serif;
  --font-body:     'Inter', sans-serif;

  /* Radius */
  --radius-sm:   0.25rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* Shadows — ambient, clinical overhead light */
  --shadow-card:   0 2px 8px rgba(11, 28, 48, 0.06);
  --shadow-float:  0 0 32px rgba(11, 28, 48, 0.04);
  --shadow-action: 0 4px 16px rgba(0, 74, 198, 0.18);
}

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

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-body);
  background-color: var(--surface);
  color: var(--on-surface);
  min-height: 100dvh;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
.headline { font-family: var(--font-headline); letter-spacing: -0.02em; }

/* ---- Material Symbols ------------------------------------- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
  user-select: none;
}

/* ---- Glassmorphism Header --------------------------------- */
.glass-header {
  background: rgba(248, 249, 255, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(195, 198, 215, 0.25);
}

/* ---- Primary Gradient Button ------------------------------ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
  color: var(--on-primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-action);
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s;
  width: 100%;
}
.btn-primary:hover  { filter: brightness(1.08); }
.btn-primary:active { transform: scale(0.98); }

/* ---- Ghost / Secondary Button ----------------------------- */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  color: var(--primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s;
}
.btn-ghost:hover { background: var(--surface-container-high); }

/* ---- Input Fields ----------------------------------------- */
.input-field {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--surface-container-low);
  border: 1.5px solid transparent;
  border-radius: var(--radius-lg);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  outline: none;
  transition: background 0.2s, border-color 0.2s;
}
.input-field::placeholder { color: var(--outline); }
.input-field:focus {
  background: var(--surface-container-lowest);
  border-color: rgba(0, 74, 198, 0.35);
}

.input-icon-wrap {
  position: relative;
}
.input-icon-wrap .material-symbols-outlined {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--outline);
  font-size: 1.25rem;
  pointer-events: none;
}
.input-icon-wrap .input-field { padding-left: 3rem; }

/* ---- Cards ------------------------------------------------ */
.card {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 2rem;
}

/* ---- Classification Chips --------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chip-negative {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}
.chip-positive {
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
}
.chip-uncertain {
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}

/* ---- Scrollbar -------------------------------------------- */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: 99px; }

/* ---- Utility ---------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}