/**
 * Material Design Foundation - Design Tokens
 * CSS Custom Properties shared across all component stylesheets
 * @package    com_doctors
 * @since      1.11.0
 */

:root {
  /* Material Design Colors */
  --md-primary: #1976d2;
  --md-primary-dark: #1565c0;
  --md-primary-light: #42a5f5;
  --md-primary-alpha: rgba(25, 118, 210, 0.08);
  --md-secondary: #6c757d;
  --md-surface: #ffffff;
  --md-background: #f3f4f6;
  --md-text-primary: rgba(0, 0, 0, 0.87);
  --md-text-dark: #1f1f1f;
  --md-text-sub: #374151;
  --md-text-secondary: rgba(0, 0, 0, 0.60);
  --md-text-grey: #6b7280;
  --md-text-disabled: rgba(0, 0, 0, 0.38);
  --md-border-color: rgba(0, 0, 0, 0.23);
  --md-border-color-hover: rgba(0, 0, 0, 0.87);
  --md-divider: rgba(0, 0, 0, 0.12);

  /* Card-specific colors */
  --md-doctor-photo-bg: #e5e7eb;
  --md-rating-text-color: #92400e;
  --md-icon-star-color: #f59e0b;
  --md-chip-bg: #f3f4f6;
  --md-chip-text: #4b5563;

  --md-child-font-color: #235c26;
  --md-child-bg-color: #E8F5E9;

  /* Material Design Elevation Shadows */
  --md-elevation-1: 0 2px 1px -1px rgba(0,0,0,0.2),
                     0 1px 1px 0 rgba(0,0,0,0.14),
                     0 1px 3px 0 rgba(0,0,0,0.12);
  --md-elevation-2: 0 3px 1px -2px rgba(0,0,0,0.2),
                     0 2px 2px 0 rgba(0,0,0,0.14),
                     0 1px 5px 0 rgba(0,0,0,0.12);
  --md-elevation-3: 0 3px 3px -2px rgba(0,0,0,0.2),
                     0 3px 4px 0 rgba(0,0,0,0.14),
                     0 1px 8px 0 rgba(0,0,0,0.12);
  --md-elevation-4: 0 2px 4px -1px rgba(0,0,0,0.2),
                     0 4px 5px 0 rgba(0,0,0,0.14),
                     0 1px 10px 0 rgba(0,0,0,0.12);

  /* Card-specific shadows */
  --md-shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --md-shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1);
  --md-shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.15);
  --md-card-shadow: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.05);

  /* Material Design Transitions */
  --md-transition-duration-short: 150ms;
  --md-transition-duration-standard: 250ms;
  --md-transition-duration-long: 300ms;
  --md-transition-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --md-transition-easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --md-transition-easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1);

  /* Material Design Spacing (8dp grid) */
  --md-spacing-1: 8px;
  --md-spacing-2: 16px;
  --md-spacing-3: 24px;
  --md-spacing-4: 32px;

  /* Material Design Input Dimensions */
  --md-input-height: 56px;
  --md-input-padding-x: 16px;
  --md-input-padding-y: 16px;
  --md-input-border-width: 1px;
  --md-input-border-radius: 4px;
  --md-input-focus-border-width: 2px;

  /* Doctor Card Typography */
  --md-fs-name: 1.3rem;
  --md-fs-title: 1.1rem;
  --md-fs-section-label: 0.7rem;
  --md-fs-info-chip: 0.8rem;
  --md-fs-badge: 0.75rem;
  --md-fs-icon: 20px;

  /* Card Dimensions */
  --md-card-width: 350px;
  --md-card-border-radius: 32px;
  --md-image-border-radius: 24px;
  --md-chip-border-radius: 10px;
  --md-badge-border-radius: 12px;

  /* Soft UI Filter Bar */
  --filter-input-radius: 24px;
  --filter-panel-radius: 32px;
  --filter-input-height: 52px;
}

/* Material Design Elevation Classes */
.md-elevation-1 {
  box-shadow: var(--md-elevation-1);
}

.md-elevation-2 {
  box-shadow: var(--md-elevation-2);
}

.md-elevation-3 {
  box-shadow: var(--md-elevation-3);
}

.md-elevation-4 {
  box-shadow: var(--md-elevation-4);
}

/* Material Design Icon Base */
.md-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  flex-shrink: 0;
}

.light-text {
    font-weight: normal;
    opacity: 75%;
}