/**
 * BlueHive Health Brand Theme
 * Generated by @mieweb/ui
 * DOT Physical scheduling and healthcare compliance platform
 *
 * Usage (standalone CSS):
 *   @import '@mieweb/ui/brands/bluehive.css';
 *
 * Usage (Tailwind CSS 4):
 *   @import '@mieweb/ui/brands/bluehive.css' layer(theme);
 */

/* ============================================
   BlueHive Health Design Tokens
   ============================================ */

:root {
  /* Primary Color Scale - BlueHive Blue */
  --mieweb-primary-50: #e6f7fc;
  --mieweb-primary-100: #b3e6f6;
  --mieweb-primary-200: #80d5f0;
  --mieweb-primary-300: #4dc4ea;
  --mieweb-primary-400: #27aae1;
  --mieweb-primary-500: #27aae1;
  --mieweb-primary-600: #1f98ca;
  --mieweb-primary-700: #1786b3;
  --mieweb-primary-800: #0f749c;
  --mieweb-primary-900: #086285;
  --mieweb-primary-950: #00506e;

  /* Light Mode Semantic Colors */
  --mieweb-background: #ffffff;
  --mieweb-foreground: #171717;
  --mieweb-card: #ffffff;
  --mieweb-card-foreground: #171717;
  --mieweb-muted: #f5f5f5;
  --mieweb-muted-foreground: #494949;
  --mieweb-border: #e5e7eb;
  --mieweb-input: #e5e7eb;
  --mieweb-ring: #27aae1;
  --mieweb-destructive: #dc2626;
  --mieweb-destructive-foreground: #ffffff;
  --mieweb-success: #15803d;
  --mieweb-success-foreground: #ffffff;
  --mieweb-warning: #f59e0b;
  --mieweb-warning-foreground: #451a03;
  --mieweb-info: #0ea5e9;
  --mieweb-info-foreground: #ffffff;
  --mieweb-secondary-foreground: #ffffff;

  /* Chart / Data Visualization */
  --mieweb-chart-1: #27aae1;
  --mieweb-chart-2: #22c55e;
  --mieweb-chart-3: #f59e0b;
  --mieweb-chart-4: #ef4444;
  --mieweb-chart-5: #6366f1;

  /* Typography */
  --mieweb-font-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  --mieweb-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Border Radius */
  --mieweb-radius-none: 0;
  --mieweb-radius-sm: 0.25rem;
  --mieweb-radius-md: 0.5rem;
  --mieweb-radius-lg: 0.75rem;
  --mieweb-radius-xl: 1rem;
  --mieweb-radius-2xl: 1.5rem;
  --mieweb-radius-full: 9999px;

  /* Shadows */
  --mieweb-shadow-card:
    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --mieweb-shadow-dropdown:
    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --mieweb-shadow-modal:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Dark Mode */
[data-theme='dark'],
.dark {
  --mieweb-background: #171717;
  --mieweb-foreground: #fafafa;
  --mieweb-card: #262626;
  --mieweb-card-foreground: #fafafa;
  --mieweb-muted: #404040;
  --mieweb-muted-foreground: #a1a1aa;
  --mieweb-border: #404040;
  --mieweb-input: #404040;
  --mieweb-ring: #27aae1;
  --mieweb-destructive: #dc2626;
  --mieweb-destructive-foreground: #fafafa;
  --mieweb-success: #16a34a;
  --mieweb-success-foreground: #fafafa;
  --mieweb-warning: #d97706;
  --mieweb-warning-foreground: #451a03;
  --mieweb-info: #0284c7;
  --mieweb-info-foreground: #fafafa;
  --mieweb-secondary-foreground: #fafafa;

  /* Chart */
  --mieweb-chart-1: #38bdf8;
  --mieweb-chart-2: #4ade80;
  --mieweb-chart-3: #fbbf24;
  --mieweb-chart-4: #f87171;
  --mieweb-chart-5: #818cf8;
}

/* ============================================
   Typography Base
   ============================================ */

body {
  font-family: var(--mieweb-font-sans);
  background-color: var(--mieweb-background);
  color: var(--mieweb-foreground);
}

code,
pre,
kbd {
  font-family: var(--mieweb-font-mono);
}

/* ============================================
   Smooth Theme Transitions
   ============================================ */

*,
*::before,
*::after {
  transition:
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}

/* Disable transitions on page load */
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after {
  transition: none !important;
}

/* ============================================
   Focus Ring Utilities
   ============================================ */

.focus-ring {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-ring:focus-visible {
  outline: 2px solid var(--mieweb-ring);
}