/* ============================================
   UNIFIED DESIGN SYSTEM - DENTAL VOICE PRO
   Soft, refined aesthetic with NO harsh whites
   Miniaturized scale (1/4 of previous size)
   Easy on eyes, sophisticated, cohesive
   ============================================ */

:root {
  /* ============================================
     SOFT BACKGROUNDS - NO HARSH WHITE (#FFFFFF)
     ============================================ */
  --bg-lightest: #F8FAFB;      /* Softest background - replaces pure white */
  --bg-light: #F1F4F7;         /* Light sections - subtle gray tint */
  --bg-medium: #E8EDF2;        /* Medium contrast areas */
  --bg-medium-dark: #DFE5EA;   /* Slightly darker for depth */
  --bg-dark: #0A1628;          /* Rich navy for dark sections */
  --bg-dark-blue: #1E3A5F;     /* Deep blue for dark gradients */

  /* ============================================
     UNIFIED COLOR PALETTE
     ============================================ */
  --color-primary: #4F75FF;    /* Unified blue (consolidating multiple blues) */
  --color-primary-light: #7393FF;
  --color-primary-dark: #3356E6;

  --color-accent: #14B8A6;     /* Teal accent */
  --color-accent-light: #2DD4BF;
  --color-accent-dark: #0F9E8E;

  --color-purple: #6366F1;     /* Refined purple */
  --color-purple-light: #818CF8;
  --color-purple-dark: #4F46E5;

  /* ============================================
     TEXT COLORS - OPTIMIZED FOR SOFT BACKGROUNDS
     ============================================ */
  --text-primary: #1A2332;     /* Dark charcoal for headings */
  --text-secondary: #4A5567;   /* Medium gray for body */
  --text-tertiary: #6B7280;    /* Light gray for muted text */
  --text-on-dark: #E2E8F0;     /* Light text on dark backgrounds */
  --text-muted-dark: #94A3B8;  /* Muted text on dark */

  /* ============================================
     STATUS & FEEDBACK COLORS
     ============================================ */
  --color-success: #10B981;
  --color-success-light: #34D399;
  --color-warning: #F59E0B;
  --color-warning-light: #FBBF24;
  --color-error: #EF4444;
  --color-error-light: #F87171;
  --color-info: #3B82F6;
  --color-info-light: #60A5FA;

  /* ============================================
     BORDERS & DIVIDERS - SUBTLE
     ============================================ */
  --border-light: rgba(15, 23, 42, 0.08);
  --border-medium: rgba(15, 23, 42, 0.12);
  --border-dark: rgba(15, 23, 42, 0.16);
  --border-on-dark: rgba(255, 255, 255, 0.12);

  /* ============================================
     SHADOWS - SUBTLE & REFINED
     ============================================ */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 4px 16px rgba(15, 23, 42, 0.10);
  --shadow-xl: 0 8px 32px rgba(15, 23, 42, 0.12);

  /* ============================================
     MINIATURIZED SPACING SCALE (1/4 of previous)
     Previous: 1rem, 2rem, 3rem, 4rem, 6rem, 8rem
     New: 0.25rem, 0.5rem, 0.75rem, 1rem, 1.5rem, 2rem
     ============================================ */
  --spacing-xs: 0.25rem;       /* 4px - tiny gaps */
  --spacing-sm: 0.5rem;        /* 8px - small padding */
  --spacing-md: 0.75rem;       /* 12px - medium padding */
  --spacing-lg: 1rem;          /* 16px - large padding */
  --spacing-xl: 1.5rem;        /* 24px - section spacing */
  --spacing-2xl: 2rem;         /* 32px - major sections */
  --spacing-3xl: 3rem;         /* 48px - large sections */
  --spacing-4xl: 4rem;         /* 64px - hero spacing */

  /* ============================================
     COMPACT TYPOGRAPHY SCALE (40% smaller)
     Previous: 1rem, 1.25rem, 1.5rem, 2rem, 3rem, 4rem
     New: 0.75rem, 0.875rem, 1rem, 1.125rem, 1.5rem, 2rem
     ============================================ */
  --font-xs: 0.75rem;          /* 12px - small labels */
  --font-sm: 0.875rem;         /* 14px - body text, buttons */
  --font-base: 1rem;           /* 16px - standard text */
  --font-md: 1.125rem;         /* 18px - card titles */
  --font-lg: 1.25rem;          /* 20px - section subtitles */
  --font-xl: 1.5rem;           /* 24px - section titles */
  --font-2xl: 2rem;            /* 32px - page titles */
  --font-3xl: 2.5rem;          /* 40px - hero titles */

  /* ============================================
     FONT WEIGHTS
     ============================================ */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* ============================================
     LINE HEIGHTS
     ============================================ */
  --line-tight: 1.2;
  --line-normal: 1.5;
  --line-relaxed: 1.7;

  /* ============================================
     BORDER RADIUS - COMPACT
     ============================================ */
  --radius-sm: 0.375rem;       /* 6px - small elements */
  --radius-md: 0.5rem;         /* 8px - cards, buttons */
  --radius-lg: 0.75rem;        /* 12px - larger cards */
  --radius-xl: 1rem;           /* 16px - modals */
  --radius-full: 9999px;       /* Fully rounded */

  /* ============================================
     COMPONENT SIZING - MINIATURIZED (1/4 scale)
     ============================================ */

  /* CARDS */
  --card-padding: 0.75rem;         /* Was 2-3rem */
  --card-padding-sm: 0.5rem;       /* Was 1.5rem */
  --card-padding-lg: 1rem;         /* Was 3rem */
  --card-min-height: 150px;        /* Was 300px+ */

  /* BUTTONS */
  --button-padding-y: 0.5rem;      /* Was 0.875rem */
  --button-padding-x: 1rem;        /* Was 1.75rem */
  --button-padding-sm-y: 0.375rem; /* Was 0.625rem */
  --button-padding-sm-x: 0.75rem;  /* Was 1.25rem */
  --button-font-size: 0.875rem;    /* Was 1rem */
  --button-font-size-sm: 0.75rem;  /* Was 0.875rem */

  /* HERO SECTIONS */
  --hero-padding-y: 3rem;          /* Was 8rem */
  --hero-min-height: 35vh;         /* Was 60-90vh */

  /* SECTION SPACING */
  --section-padding-y: 2rem;       /* Was 5rem */
  --section-padding-y-lg: 3rem;    /* Was 8rem */

  /* GRID GAPS */
  --grid-gap: 0.75rem;             /* Was 2rem */
  --grid-gap-sm: 0.5rem;           /* Was 1rem */
  --grid-gap-lg: 1rem;             /* Was 3rem */

  /* ============================================
     TRANSITIONS & ANIMATIONS
     ============================================ */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* ============================================
     Z-INDEX LAYERS
     ============================================ */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ============================================
   GLOBAL BASE STYLES
   ============================================ */

body {
  font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-base);
  line-height: var(--line-normal);
  color: var(--text-primary);
  background: var(--bg-lightest);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}


/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */

.text-xs { font-size: var(--font-xs); }
.text-sm { font-size: var(--font-sm); }
.text-base { font-size: var(--font-base); }
.text-md { font-size: var(--font-md); }
.text-lg { font-size: var(--font-lg); }
.text-xl { font-size: var(--font-xl); }
.text-2xl { font-size: var(--font-2xl); }
.text-3xl { font-size: var(--font-3xl); }

.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-on-dark { color: var(--text-on-dark); }

/* ============================================
   BACKGROUND UTILITIES
   ============================================ */

.bg-lightest { background: var(--bg-lightest); }
.bg-light { background: var(--bg-light); }
.bg-medium { background: var(--bg-medium); }
.bg-dark { background: var(--bg-dark); }

/* ============================================
   SPACING UTILITIES
   ============================================ */

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }

.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.m-2xl { margin: var(--spacing-2xl); }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Mobile first approach */
/* xs: 0-639px (default) */
/* sm: 640px+ */
/* md: 768px+ */
/* lg: 1024px+ */
/* xl: 1280px+ */

@media (max-width: 639px) {
  :root {
    --font-2xl: 1.75rem;       /* Slightly smaller on mobile */
    --font-3xl: 2rem;
    --hero-padding-y: 2rem;
    --section-padding-y: 1.5rem;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  body {
    background: white;
    color: black;
  }
}