/* ============================================================
   DentaCare Pro — Design Tokens (from "Clinical Precision" theme)
   ============================================================ */

:root {
  --color-surface: #f9f9ff;
  --color-surface-dim: #cfdaf2;
  --color-surface-bright: #f9f9ff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f0f3ff;
  --color-surface-container: #e7eeff;
  --color-surface-container-high: #dee8ff;
  --color-surface-container-highest: #d8e3fb;
  --color-on-surface: #111c2d;
  --color-on-surface-variant: #3e4850;
  --color-inverse-surface: #263143;
  --color-inverse-on-surface: #ecf1ff;
  --color-outline: #6e7881;
  --color-outline-variant: #bec8d2;

  --color-primary: #006591;
  --color-on-primary: #ffffff;
  --color-primary-container: #0ea5e9;
  --color-on-primary-container: #003751;
  --color-inverse-primary: #89ceff;
  --color-primary-fixed: #c9e6ff;
  --color-primary-fixed-dim: #89ceff;

  --color-secondary: #006c49;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #6cf8bb;
  --color-on-secondary-container: #00714d;
  --color-secondary-fixed: #6ffbbe;
  --color-secondary-fixed-dim: #4edea3;

  --color-tertiary: #5c5f61;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #999c9e;
  --color-on-tertiary-container: #303436;

  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  --color-background: #f9f9ff;
  --color-on-background: #111c2d;
  --color-surface-variant: #d8e3fb;

  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --margin-mobile: 16px;
  --margin-desktop: 32px;
  --gutter: 24px;
  --container-max: 1440px;
}

/* Tailwind CDN config mirrors these tokens — see includes/tailwind-config.php */

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-on-background);
  margin: 0;
}

h1, h2, h3, h4, h5, h6, .display, .headline {
  font-family: var(--font-display);
}

.custom-input {
  border: 1px solid #E2E8F0;
  transition: all 0.2s ease-in-out;
}
.custom-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 101, 145, 0.1);
  outline: none;
}

.glass-panel {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0px 20px 25px rgba(30, 41, 59, 0.15);
}

.card {
  background: var(--color-surface-container-lowest);
  border: 1px solid #F1F5F9;
  border-radius: var(--radius-xl);
  box-shadow: 0px 2px 4px rgba(30, 41, 59, 0.05);
}

/* Scrollbar polish (optional, non-essential) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-outline-variant); border-radius: 4px; }