/* ==========================================
   LOCATRIA GLOBAL DESIGN SYSTEM - VARIABLES
   Helping Local Businesses Grow with AI
   ========================================== */

:root {
  /* --- COLOR SYSTEM --- */
  /* Primary Action Blue (Trust, Professional, Accessible) */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-500: #0284c7; /* Main Action Color */
  --color-primary-600: #026597; /* Primary Hover */
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e; /* Primary Dark Surface */

  /* Neutral Surfaces (Light Theme First) */
  --color-bg-body: #ffffff;
  --color-bg-surface: #fafafa;
  --color-bg-subtle: #f8fafc;
  --color-bg-muted: #f1f5f9;
  --color-bg-hover: #e2e8f0;

  /* Text & Typography Colors (High Contrast WCAG AAA/AA) */
  --color-text-main: #0f172a;      /* Primary Headings & Dark Text */
  --color-text-body: #334155;      /* Comfortable Body Text */
  --color-text-muted: #64748b;     /* Captions & Secondary Text */
  --color-text-subtle: #94a3b8;    /* Placeholders & De-emphasized */
  --color-text-inverse: #ffffff;   /* Text on Dark Backgrounds */

  /* Borders & Dividers */
  --color-border-light: #f1f5f9;
  --color-border-subtle: #e2e8f0;  /* Standard Border */
  --color-border-strong: #cbd5e1;  /* Input & Button Borders */

  /* Subtle Industry Accents (Clean, Non-overpowering) */
  --color-accent-real-estate: #0284c7; /* Blue */
  --color-accent-law: #0f172a;         /* Slate */
  --color-accent-dental: #0d9488;      /* Teal */
  --color-accent-amber: #b45309;       /* Warm alert accent */
  --color-accent-emerald: #047857;     /* Success / Featured */

  /* Focus & Focus Ring */
  --color-focus-ring: rgba(2, 132, 199, 0.35);
  --color-focus-outline: #0284c7;

  /* --- TYPOGRAPHY SYSTEM --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Scale */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65; /* Optimal for long-form reading */

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Reading Width Constraints */
  --reading-max-width: 72ch;

  /* --- SPACING SYSTEM --- */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem;  /* 24px */
  --space-8: 2rem;    /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem;   /* 48px */
  --space-16: 4rem;   /* 64px */
  --space-20: 5rem;   /* 80px */
  --space-24: 6rem;   /* 96px */

  /* --- LAYOUT BOUNDARIES --- */
  --container-max: 1280px;
  --header-height: 72px;
  --sidebar-width: 300px;

  /* --- BORDER RADIUS (SUBTLE & RESTRAINED) --- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* --- SHADOWS (VERY SOFT & NATURAL) --- */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.06), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --shadow-modal: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);

  /* --- TRANSITIONS --- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Z-INDEX LAYERS --- */
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
}