/* =============================================================
   ADI Pet PMS — Design Tokens
   Base brand: theanimaldoctors.org (teal + coral + warm cream)
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Nunito+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- BRAND COLORS ---------- */
  --teal-900: #143638;
  --teal-800: #1a4a4d;
  --teal-700: #225a5e;
  --teal-600: #2a6e72;       /* PRIMARY brand teal */
  --teal-500: #3d8589;
  --teal-400: #6ba8ab;
  --teal-300: #a3c8ca;
  --teal-200: #d0e2e3;
  --teal-100: #e3eded;
  --teal-50:  #f1f6f6;
  --teal-tint: #dceeee;      /* hover-bg, info surfaces */

  --coral-700: #b3603c;
  --coral-600: #c8714a;
  --coral-500: #e89b6f;      /* SECONDARY accent */
  --coral-400: #f0b58e;
  --coral-300: #f6cdb1;
  --coral-200: #fbe1cf;
  --coral-100: #fcebdc;

  /* ---------- WARM NEUTRALS ---------- */
  --cream-100: #faf7f1;
  --cream-200: #f8f4ee;      /* PAGE BACKGROUND */
  --cream-300: #f2ece1;
  --sand-100: #ebe0ce;
  --sand-200: #ddd0bc;

  --ink-900: #1f1b16;
  --ink-800: #2b2722;        /* primary text */
  --ink-700: #4a443d;
  --ink-600: #6e665e;        /* secondary text */
  --ink-500: #8c857c;
  --ink-400: #a8a198;
  --ink-300: #c5beb4;
  --ink-200: #e0d9cf;
  --ink-100: #ece6dc;

  --border-strong: #d8d1c5;
  --border: #e7e1d8;         /* default border */
  --border-soft: #efe9df;
  --divider: #f0eadf;

  --surface: #ffffff;        /* card surface */
  --surface-alt: #fbf9f4;
  --surface-hover: #f5efe5;

  /* ---------- STATUS COLORS ----------
     Each status has: solid (for dots/icons), tint (for pill bg), ink (for pill text) */

  --status-booked: #6b7fa8;          /* slate blue */
  --status-booked-tint: #e3e8f1;
  --status-booked-ink: #3f4f73;

  --status-confirmed: #5a9b6e;       /* green */
  --status-confirmed-tint: #e1efe4;
  --status-confirmed-ink: #356b48;

  --status-arrived: #d9a24a;         /* amber */
  --status-arrived-tint: #f7ecd3;
  --status-arrived-ink: #8a6620;

  --status-inconsult: var(--teal-600);  /* ADI primary teal */
  --status-inconsult-tint: var(--teal-tint);
  --status-inconsult-ink: var(--teal-800);

  --status-complete: #8c857c;        /* warm grey */
  --status-complete-tint: #ece8e0;
  --status-complete-ink: #4a443d;

  --status-noshow: #c2554d;          /* red */
  --status-noshow-tint: #f4dad7;
  --status-noshow-ink: #842e28;

  --status-cancelled: #b0a9a0;       /* muted warm grey */
  --status-cancelled-tint: #ece8e2;
  --status-cancelled-ink: #6e665e;

  /* ---------- SEMANTIC ---------- */
  --success: var(--status-confirmed);
  --success-tint: var(--status-confirmed-tint);
  --success-ink: var(--status-confirmed-ink);

  --warning: var(--status-arrived);
  --warning-tint: var(--status-arrived-tint);
  --warning-ink: var(--status-arrived-ink);

  --danger: var(--status-noshow);
  --danger-tint: var(--status-noshow-tint);
  --danger-ink: var(--status-noshow-ink);

  --info: var(--teal-600);
  --info-tint: var(--teal-tint);
  --info-ink: var(--teal-800);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "Playfair Display", "Lora", Georgia, serif;
  --font-sans: "Nunito Sans", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Sizes */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;          /* DEFAULT */
  --fs-md:   15px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  22px;
  --fs-3xl:  28px;
  --fs-4xl:  36px;
  --fs-5xl:  48px;

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line heights */
  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.5;
  --lh-relax: 1.65;

  /* Tracking */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-wider: 0.08em;       /* eyebrow caps */

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;

  /* ---------- RADII ---------- */
  --r-sm:  6px;
  --r-md:  8px;             /* inputs, buttons */
  --r-lg:  12px;            /* cards */
  --r-xl:  16px;
  --r-2xl: 20px;
  --r-full: 999px;          /* pills, avatars */

  /* ---------- SHADOWS (teal-tinted) ---------- */
  --sh-xs: 0 1px 1px rgba(20, 54, 56, 0.04);
  --sh-sm: 0 1px 2px rgba(20, 54, 56, 0.06), 0 1px 3px rgba(20, 54, 56, 0.04);
  --sh-md: 0 4px 12px rgba(20, 54, 56, 0.08), 0 1px 2px rgba(20, 54, 56, 0.04);
  --sh-lg: 0 8px 24px rgba(20, 54, 56, 0.10), 0 2px 4px rgba(20, 54, 56, 0.04);
  --sh-xl: 0 16px 40px rgba(20, 54, 56, 0.12);
  --sh-focus: 0 0 0 3px rgba(42, 110, 114, 0.18);

  /* ---------- LAYOUT ---------- */
  --sidebar-w: 240px;
  --sidebar-collapsed-w: 64px;
  --topbar-h: 64px;
  --content-pad: 32px;
  --content-pad-mobile: 16px;
  --card-pad: 24px;
  --row-h: 56px;
  --input-h: 40px;
  --button-h: 40px;
  --button-h-sm: 32px;

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
}

/* =============================================================
   BASE RESET + TYPE
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink-800);
  background: var(--cream-200);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a { color: var(--teal-700); text-decoration: none; }
a:hover { color: var(--teal-800); text-decoration: underline; text-underline-offset: 2px; }

::selection { background: var(--teal-tint); color: var(--teal-900); }

/* Tabular numbers in data tables */
.tabular { font-variant-numeric: tabular-nums; }

/* Eyebrow */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--ink-600);
}

/* Display heading — RESERVED for login welcome */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--ink-900);
}

/* Sans heading scale (everywhere except login welcome) */
.h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold);     line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold);     line-height: var(--lh-snug);  letter-spacing: var(--ls-tight); }
.h3 { font-size: var(--fs-xl);  font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.h4 { font-size: var(--fs-lg);  font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.h5 { font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }