/* =============================================================================
   Shared UI kit primitives — used across marketing site + patient portal.
   Imports the design tokens from ../../colors_and_type.css.
   ============================================================================= */

@import url('../../colors_and_type.css');

/* ---------------------------------------------------------------- BUTTONS */

.btn {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 9999px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.btn:focus-visible { outline: 2px solid var(--dc-blue-700); outline-offset: 3px; }
.btn:active { transform: scale(0.98); }

.btn--primary { background: var(--dc-blue-700); color: #fff; }
.btn--primary:hover { background: var(--dc-blue-800); }

.btn--accent  { background: var(--dc-coral-400); color: #fff; }
.btn--accent:hover  { background: var(--dc-coral-500); }

.btn--outline { background: transparent; color: var(--dc-blue-700); border: 1.5px solid var(--dc-blue-700); padding: 11.5px 22.5px; }
.btn--outline:hover { background: var(--dc-blue-50); }

.btn--ghost { background: transparent; color: var(--dc-blue-700); }
.btn--ghost:hover { background: var(--dc-blue-50); }

.btn--on-blue { background: #fff; color: var(--dc-blue-700); }
.btn--on-blue:hover { background: var(--dc-blue-50); }

.btn--circle { width: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; }
.btn--sm { font-size: 13.5px; padding: 9px 18px; }
.btn--lg { font-size: 17px; padding: 16px 32px; }

/* ---------------------------------------------------------------- BADGES */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 9999px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.badge--blue    { background: var(--dc-blue-100); color: var(--dc-blue-700); }
.badge--coral   { background: var(--dc-coral-50); color: var(--dc-coral-600); }
.badge--sand    { background: var(--dc-sand-50); color: var(--dc-sand-500); }
.badge--mauve   { background: var(--dc-mauve-50); color: var(--dc-mauve-500); }
.badge--success { background: #E6F4EC; color: #1F6A45; }
.badge--solid-blue { background: var(--dc-blue-700); color: #fff; }

/* ---------------------------------------------------------------- INPUTS */

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--dc-blue-800);
}
.field--required > label::after { content: ' *'; color: var(--dc-coral-500); }
.field > .hint { font-size: 12px; color: var(--dc-ink-60); }

.input {
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border-soft);
  background: var(--dc-white);
  color: var(--fg-strong);
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
  width: 100%;
}
.input:focus {
  outline: none;
  border-color: var(--dc-blue-700);
  box-shadow: 0 0 0 4px rgba(5, 55, 135, 0.12);
}
.input::placeholder { color: var(--dc-ink-50); }
select.input { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23053787' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

/* ---------------------------------------------------------------- CARDS */

.card {
  background: var(--dc-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: box-shadow var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.card--hover:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.card--cream { background: var(--dc-cream-light); border: 0; }
.card--blue  { background: var(--dc-blue-50); border: 0; }

/* ---------------------------------------------------------------- PEBBLE */

.pebble {
  border-radius: 9999px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: var(--grad-blue-deep);
  color: #fff;
  padding: 18px 36px 18px 24px;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pebble--reverse {
  border-radius: 9999px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: 18px 24px 18px 36px;
}
.pebble--mauve { background: var(--grad-mauve-coral); }
.pebble--soft  { background: var(--grad-blue-soft); color: var(--fg-strong); }
.pebble--sand  { background: var(--grad-sand); color: var(--fg-strong); }
.pebble--mauve-solid { background: var(--dc-mauve-300); }

/* ---------------------------------------------------------------- LAYOUT */

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 720px) { .container { padding: 0 18px; } }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--dc-mauve-400);
}
.eyebrow--blue { color: var(--dc-blue-500); }

/* Typography helpers */
.t-display { font-family: var(--font-display); font-size: 60px; font-weight: 900; line-height: 1.04; letter-spacing: -0.018em; color: var(--dc-blue-900); }
.t-h1     { font-family: var(--font-display); font-size: clamp(32px, 3.6vw, 44px); font-weight: 900; line-height: 1.06; letter-spacing: -0.014em; color: var(--dc-blue-900); }
.t-h2     { font-size: 32px; font-weight: 800; line-height: 1.15; letter-spacing: -0.012em; color: var(--dc-blue-900); }
.t-h3     { font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--dc-blue-900); }
.t-h4     { font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--dc-blue-900); }
.t-lead   { font-size: 18px; font-weight: 500; line-height: 1.55; color: var(--dc-blue-800); }
.t-body   { font-size: 15.5px; font-weight: 400; line-height: 1.55; color: var(--dc-blue-800); }
.t-caption{ font-size: 13px; font-weight: 500; color: var(--dc-ink-70); }
.t-italic { font-style: italic; font-weight: 900; color: var(--dc-blue-700); }

/* Generic utilities */
.flex { display: flex; }
.col  { display: flex; flex-direction: column; }
.row  { display: flex; flex-direction: row; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .gap-12 { gap: 48px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.grow { flex: 1; }