/* ==========================================================================
   PawCare Veterinary Theme - CSS Custom Properties
   Teal + Glassmorphism Design System
   ========================================================================== */

:root {
  --color-bg-primary: #E6EAEA;
  --color-bg-secondary: #FFFFFF;
  --color-bg-tertiary: #F0F4F4;
  --color-text-primary: #1A2332;
  --color-text-secondary: #4A5568;
  --color-text-muted: #8899A6;
  --color-accent: #1A9BA5;
  --color-accent-hover: #158A93;
  --color-accent-dark: #147E87;
  --color-accent-secondary: var(--color-accent);
  --color-accent-secondary-hover: var(--color-accent-hover);
  --color-border: rgba(0, 0, 0, 0.06);
  --color-on-dark: #FFFFFF;
  --color-card-bg: #FFFFFF;

  --teal-500: #1A9BA5;
  --teal-600: #158A93;
  --teal-700: #117880;
  --teal-800: #0D666E;
  --teal-900: #0A545C;

  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-bg-strong: rgba(255, 255, 255, 0.18);
  --glass-bg-light: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-blur: 20px;

  --font-heading: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --h1-font-size: 52px;
  --h2-font-size: 40px;
  --h3-font-size: 30px;
  --h4-font-size: 24px;

  --body-font-size: 16px;
  --body-line-height: 1.7;

  --container-max-width: 1200px;
  --container-padding: 24px;

  --theme-image-radius: 16px;
  --theme-button-radius: 12px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);

  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  --z-sticky: 200;
  --z-overlay: 300;
}