/* CareLens — Warm, empathetic, generous.
   Warm sage primary · PT Serif + Nunito · WCAG AA · older-audience friendly. */

@import url("https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  /* Ink — warm-leaning charcoal (slightly warmer than other brands) */
  --ink-950: oklch(0.20 0.012 60);
  --ink-900: oklch(0.26 0.014 60);
  --ink-800: oklch(0.34 0.014 60);
  --ink-700: oklch(0.44 0.012 60);
  --ink-600: oklch(0.56 0.010 60);
  --ink-500: oklch(0.66 0.008 60);
  --ink-400: oklch(0.76 0.008 60);
  --ink-300: oklch(0.85 0.008 60);
  --ink-200: oklch(0.91 0.008 60);
  --ink-100: oklch(0.96 0.006 60);
  --ink-50:  oklch(0.985 0.004 60);

  /* Surface — warm blush/cream */
  --surface:   oklch(0.985 0.012 60);
  --surface-2: oklch(0.965 0.018 55);
  --surface-3: oklch(0.94 0.024 50);

  /* Sage — primary brand (warm, muted, calming) */
  --sage-950: oklch(0.22 0.04 145);
  --sage-800: oklch(0.34 0.06 145);
  --sage-700: oklch(0.44 0.06 145);
  --sage-600: oklch(0.50 0.06 145);
  --sage-500: oklch(0.55 0.06 145);   /* primary */
  --sage-400: oklch(0.66 0.06 145);
  --sage-300: oklch(0.78 0.05 145);
  --sage-200: oklch(0.87 0.04 145);
  --sage-100: oklch(0.93 0.025 145);
  --sage-50:  oklch(0.97 0.014 145);

  /* Peach — warm accent for "highly rated / verified" */
  --peach-700: oklch(0.58 0.15 35);
  --peach-500: oklch(0.74 0.14 35);
  --peach-300: oklch(0.86 0.10 35);
  --peach-100: oklch(0.94 0.05 35);

  /* Rating palette — 5-star scale */
  --rating: oklch(0.74 0.14 60);
  --rating-dim: oklch(0.88 0.02 60);

  /* Semantic */
  --pos:      oklch(0.50 0.10 145);
  --pos-soft: oklch(0.93 0.035 145);
  --neg:      oklch(0.55 0.16 25);
  --neg-soft: oklch(0.95 0.04 25);

  /* Type */
  --serif: "PT Serif", "Source Serif Pro", Georgia, serif;
  --sans:  "Nunito", "Open Sans", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Radius — generous, soft (consumer / older audience) */
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-full: 999px;

  /* Shadows — soft, warm */
  --shadow-card: 0 1px 2px oklch(0.20 0.012 60 / 0.04), 0 6px 18px -6px oklch(0.20 0.012 60 / 0.08);
  --shadow-pop:  0 2px 8px oklch(0.20 0.012 60 / 0.06), 0 22px 44px -10px oklch(0.20 0.012 60 / 0.12);
}

.cl-root {
  font-family: var(--sans);
  color: var(--ink-950);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* WCAG: larger base body */
  font-size: 16px;
  line-height: 1.55;
}

.cl-root .serif {
  font-family: var(--serif);
  letter-spacing: -0.005em;
}

.cl-root .num, .cl-root .mono {
  font-family: var(--mono);
  font-feature-settings: "tnum", "zero";
  font-variant-numeric: tabular-nums slashed-zero;
}

.cl-root .micro {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--sage-700);
}

/* Pill */
.cl-root .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--r-full);
  background: var(--ink-100);
  color: var(--ink-700);
}
.cl-root .pill.sage   { background: var(--sage-100);  color: var(--sage-700); }
.cl-root .pill.peach  { background: var(--peach-100); color: var(--peach-700); }
.cl-root .pill.pos    { background: var(--pos-soft);  color: var(--pos); }
.cl-root .pill.neg    { background: var(--neg-soft);  color: var(--neg); }

/* Buttons — generous hit-target (48 min height for WCAG) */
.cl-root .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--r-full);
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .12s;
  white-space: nowrap;
  min-height: 48px;
}
.cl-root .btn-primary { background: var(--sage-600); color: white; }
.cl-root .btn-ghost   { background: var(--surface); color: var(--ink-950); border-color: var(--ink-300); }
.cl-root .btn-peach   { background: var(--peach-500); color: var(--ink-950); }
.cl-root .btn-dark    { background: var(--ink-950); color: var(--surface); }

/* Input */
.cl-root .input {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  font-family: var(--sans); font-size: 17px;
  color: var(--ink-700);
  background: var(--surface);
  border: 2px solid var(--ink-200);
  border-radius: var(--r-12);
  min-height: 52px;
}
.cl-root .input:focus-within { border-color: var(--sage-500); }

/* Card */
.cl-root .card {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-16);
  box-shadow: var(--shadow-card);
}

/* Photo placeholder — warm "care moment" block */
.cl-root .photo {
  position: relative;
  background:
    linear-gradient(135deg, oklch(0.93 0.025 145) 0%, oklch(0.92 0.05 35) 100%);
  border-radius: var(--r-12);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cl-root .photo::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, transparent 0 6px, oklch(0.97 0.012 60 / 0.4) 6px 7px);
  pointer-events: none;
}
.cl-root .photo .label {
  position: relative;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage-800);
  padding: 6px 12px;
  background: var(--surface);
  border-radius: var(--r-full);
}

/* Warm blush wash */
.cl-blush {
  background:
    radial-gradient(ellipse at top right, oklch(0.94 0.05 35 / 0.6) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, oklch(0.93 0.025 145 / 0.55) 0%, transparent 55%),
    var(--surface);
}

/* Rule */
.cl-rule { border: 0; border-top: 1px solid var(--ink-200); margin: 0; }