/*
  Design tokens — original identity for this prototype.
  Palette: deep teal (brand) + warm sand (warmth) + off-white (calm base) +
  a single restrained copper accent used sparingly for CTAs/highlights.
  Not modeled on any existing product's brand assets.
*/
:root {
  /* ---- Brand: deep teal ---- */
  --teal-900: #0b2e2e;
  --teal-800: #0f3937;
  --teal-700: #145251;
  --teal-600: #1b6b69;
  --teal-500: #227f7c;
  --teal-300: #6fa8a4;
  --teal-100: #dcebea;
  --teal-050: #eff5f4;

  /* ---- Warm sand ---- */
  --sand-700: #a9895c;
  --sand-500: #c9a97c;
  --sand-300: #e7d9be;
  --sand-100: #f3ead9;
  --sand-050: #f8f2e6;

  /* ---- Off-white / ink ---- */
  --white: #ffffff;
  --offwhite: #faf8f4;
  --ink-900: #1f2623;
  --ink-700: #364039;
  --ink-600: #4b554f;
  --ink-400: #7c877f;
  --ink-200: #c6cdc7;
  --border: #e2dcce;
  --border-strong: #cfc6ac;

  /* ---- Restrained accent (copper) ---- */
  --accent-700: #8f4526;
  --accent-600: #b5623a;
  --accent-500: #c97b4a;
  --accent-100: #f3e0d2;

  /* ---- Semantic status (muted, not neon) ---- */
  --success-700: #1f5c44;
  --success-500: #2f7d5d;
  --success-100: #dcefe4;
  --warning-700: #8a660f;
  --warning-500: #b8862e;
  --warning-100: #f7ecd3;
  --danger-700: #8c3320;
  --danger-500: #b5432f;
  --danger-100: #f6ddd6;
  --info-700: #204f65;
  --info-500: #2e6e8e;
  --info-100: #dcebf2;

  /* ---- Appointment status colors ---- */
  --status-inquiry: #7c877f;
  --status-pending: #b8862e;
  --status-confirmed: #2e6e8e;
  --status-arrived: #6a4fb0;
  --status-checked_in: #1b6b69;
  --status-in_service: #227f7c;
  --status-completed: #2f7d5d;
  --status-checked_out: #145251;
  --status-cancelled: #b5432f;
  --status-no_show: #8c3320;

  /* ---- Typography ---- */
  --font-sans: 'Manrope', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --font-display: 'Fraunces', 'Georgia', serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.125rem;
  --fs-3xl: 2.75rem;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* ---- Radius / shadow / motion ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 46, 46, 0.06), 0 1px 1px rgba(11, 46, 46, 0.04);
  --shadow-md: 0 6px 16px rgba(11, 46, 46, 0.08), 0 2px 4px rgba(11, 46, 46, 0.05);
  --shadow-lg: 0 16px 40px rgba(11, 46, 46, 0.14), 0 4px 10px rgba(11, 46, 46, 0.06);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---- Layout ---- */
  --topbar-h: 64px;
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  --content-max: 1360px;
  --z-nav: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}