@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;1,9..144,400&family=IBM+Plex+Mono:wght@400;500;600&family=DM+Sans:wght@400;500;600;700&display=swap");

/* ============================================================
   syntropy care — brand override
   Loaded AFTER the bundle CSS. Visual only: tokens, type, shape.
   No layout, density, or behaviour changes.
   ============================================================ */

/* ---- 1. Design tokens ------------------------------------- */
/* Same space-separated HSL format the build consumes via hsl(var(--x)). */
:root {
  --background: 37 57% 91%;        /* cream   #F5EBDB */
  --soft-white: 37 57% 91%;        /* cream   #F5EBDB */
  --pure-white: 37 57% 91%;        /* header now matches page */
  --card: 38 60% 97%;              /* warm near-white surface */
  --card-foreground: 30 21% 7%;
  --popover: 38 60% 97%;
  --popover-foreground: 30 21% 7%;

  --foreground: 30 21% 7%;         /* ink     #17130F */
  --primary: 30 21% 7%;            /* ink     #17130F */
  --primary-foreground: 37 57% 91%;
  --dark-teal: 30 21% 7%;
  --deep-charcoal: 30 21% 7%;

  --muted-foreground: 20 9% 34%;   /* muted   #5E544F */
  --muted: 37 42% 87%;             /* warm hover wash */

  --accent: 10 75% 69%;            /* coral   #EB8774 */
  --secondary: 10 75% 69%;
  --ring: 10 75% 69%;
  --mint: 10 75% 69%;
  --teal: 10 75% 69%;
  --muted-mint: 20 9% 34%;
  --accent-foreground: 30 21% 7%;  /* ink on coral — contrast */
  --secondary-foreground: 30 21% 7%;

  --border: 35 33% 82%;            /* warm tan rule */
  --input: 35 33% 82%;
  --header-bg: 37 57% 91%;
  --header-border: 35 33% 82%;

  --destructive: 6 63% 47%;        /* warmed alarm red — recording + errors */
  --destructive-foreground: 37 57% 91%;

  --radius: .875rem;               /* 14px — drives rounded-lg/md/sm */

  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-display: "Fraunces", Georgia, serif;
}

/* ---- 2. Typography ---------------------------------------- */
body,
.font-body {
  font-family: "DM Sans", system-ui, sans-serif;
}

/* Display / headings — Fraunces */
/* "Buscar paciente" (the only .font-mono.text-base in the app) */
.font-mono.text-base {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  color: hsl(var(--foreground));
}

/* "Listo para grabar" */
p.font-body.text-sm.font-medium.tracking-wide.text-foreground {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

/* Eyebrow labels — "TRANSCRIPCIÓN", "NOTA SOAP — EDITABLE" */
.uppercase.tracking-wider {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .14em;
  color: hsl(var(--muted-foreground));
}

/* Recording timer + inline error banner stay monospaced */
.text-2xl.tracking-widest,
.font-mono.text-xs {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
}
.text-2xl.tracking-widest {
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}

/* ---- 3. Shape: 8 / 14 / 22 / pill -------------------------- */
input.rounded-xl,
textarea.rounded-xl,
.absolute.rounded-xl {          /* inputs + the results dropdown */
  border-radius: 14px;
}

div.rounded-xl.bg-card.p-4:not(.absolute) {   /* transcript + SOAP cards */
  border-radius: 22px;
}

/* ---- 4. Buttons -------------------------------------------- */
/* Primary action — ink pill, cream text ("Aprobar y guardar…") */
button.rounded-xl.bg-accent {
  border-radius: 999px !important;
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
  box-shadow: none;
  transition: background-color 180ms ease, opacity 180ms ease;
}
button.rounded-xl.bg-accent:hover {
  background-color: hsl(var(--foreground));
  opacity: .88;
  box-shadow: none !important;
}

/* Secondary — outlined ink pill ("Descartar", "Nueva consulta") */
button.rounded-xl.bg-card {
  border-radius: 999px !important;
  background-color: transparent;
  border-color: hsl(var(--foreground));
  color: hsl(var(--foreground));
  box-shadow: none;
  transition: background-color 180ms ease;
}
button.rounded-xl.bg-card:hover {
  background-color: hsl(var(--foreground) / .07);
}

/* ---- 5. Record button — coral fill, ink ring, no glow ------ */
button.rounded-full.border-accent {
  background-color: hsl(var(--accent)) !important;
  border-color: hsl(var(--foreground)) !important;
  box-shadow: none !important;
  transition: opacity 180ms ease;
}
button.rounded-full.border-accent:hover {
  opacity: .9;
  box-shadow: none !important;
}
/* mic glyph inside it reads against coral */
button.rounded-full.border-accent .bg-accent {
  background-color: hsl(var(--background)) !important;
}
button.rounded-full.border-accent .text-accent {
  color: hsl(var(--foreground)) !important;
}

/* Saved/confirmation circle — keep light fill, coral ring, drop the glow */
div.rounded-full.border-accent {
  box-shadow: none !important;
  border-color: hsl(var(--accent)) !important;
}

/* ---- 6. Chrome: header, surfaces --------------------------- */
header.bg-pure-white {
  background-color: hsl(var(--background));
  box-shadow: none;
  border-bottom: 1px solid hsl(var(--border));
}

.shadow-lg {          /* results dropdown — flat, no glass */
  box-shadow: 0 6px 20px hsl(30 21% 7% / .10);
}
.shadow-sm {
  box-shadow: 0 1px 2px hsl(30 21% 7% / .05);
}

/* Logo lockup sits on cream, never on a white plate */
header img[alt="Syntropy Care"] {
  background: transparent;
}