/* Carima Clinics brand layer – colours taken from carimaclinics.com.
   Change the tokens below to restyle both the booking site and the practice dashboard. */

@font-face { font-family: 'Playfair Display'; font-weight: 600; font-display: swap; src: url('/fonts/playfair-display-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-weight: 700; font-display: swap; src: url('/fonts/playfair-display-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url('/fonts/manrope-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap; src: url('/fonts/manrope-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url('/fonts/manrope-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url('/fonts/manrope-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Amiri'; font-weight: 700; font-display: swap; src: url('/fonts/amiri-arabic-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2'); }

:root {
  /* brand */
  --cognac-900: #5f2f12;   /* darkest brown: strong text on light */
  --cognac:     #874820;   /* headings, logo wordmark */
  --cognac-600: #a2643a;   /* secondary headings */
  --caramel:    #d6a273;   /* active pills, primary buttons */
  --caramel-200:#ecd2b6;
  --sand:       #f5e8dc;   /* warm peach wash */
  --cream:      #fcf7f1;   /* soft panels */
  --forest:     #2e5546;   /* WhatsApp green: confirmations, "paid", "done" */
  --forest-100: #e3ece7;

  /* neutrals */
  --bg:     #fbf8f5;
  --paper:  #ffffff;
  --text:   #3d3430;
  --muted:  #7a6c63;
  --line:   #eadccd;
  --line-strong: #d8c3ad;

  /* states */
  --amber:     #b06d12;    /* waiting, attention */
  --amber-100: #f8ead4;
  --rose:      #a53f33;    /* cancel, overdue */
  --rose-100:  #f6e1dc;
  --slate:     #5c6670;
  --slate-100: #eceef0;

  --focus: 0 0 0 3px #fff, 0 0 0 5px var(--cognac);
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 26px;
  --shadow: 0 1px 2px rgba(95, 47, 18, .06), 0 8px 24px -12px rgba(95, 47, 18, .18);

  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

:root:lang(ar) {
  --font-display: 'Amiri', 'Playfair Display', serif;
  --font-ui: 'IBM Plex Sans Arabic', 'Manrope', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--font-ui);
  font-feature-settings: 'tnum' 0;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Monogram used until the practice logo file is dropped in */
.mark {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3d9bd, var(--caramel) 70%);
  border: 2px solid var(--cognac);
  color: var(--cognac-900);
  font: 700 22px/1 'Playfair Display', Georgia, serif;
  flex: none;
}

.mark-img { object-fit: contain; padding: 0; background: none; border: 0; border-radius: 50%; }

.wordmark {
  font: 700 22px/1.05 'Playfair Display', Georgia, serif;
  color: var(--cognac);
  letter-spacing: -.01em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}