/**
 * MIE Web Brand Theme
 * Generated by @mieweb/ui
 * Healthcare software and services company
 *
 * Usage (standalone CSS):
 *   @import '@mieweb/ui/brands/mieweb.css';
 *
 * Usage (Tailwind CSS 4):
 *   @import '@mieweb/ui/brands/mieweb.css' layer(theme);
 */

/* ============================================
   Medical Informatics Engineering Design Tokens
   ============================================ */

:root {
  /* Primary Color Scale - MIE Green */
  --mieweb-primary-50: #e8f8ef;
  --mieweb-primary-100: #c5edd6;
  --mieweb-primary-200: #9fe2bb;
  --mieweb-primary-300: #79d7a0;
  --mieweb-primary-400: #53cc85;
  --mieweb-primary-500: #27ae60;
  --mieweb-primary-600: #219c55;
  --mieweb-primary-700: #1b894a;
  --mieweb-primary-800: #15773e;
  --mieweb-primary-900: #0f6533;
  --mieweb-primary-950: #094d26;

  /* 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: #27ae60;
  --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: #27ae60;
  --mieweb-chart-2: #0ea5e9;
  --mieweb-chart-3: #f59e0b;
  --mieweb-chart-4: #ef4444;
  --mieweb-chart-5: #6366f1;

  /* Typography */
  --mieweb-font-sans: 'Inter', 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: #27ae60;
  --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: #4ade80;
  --mieweb-chart-2: #38bdf8;
  --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,
samp {
  font-family: var(--mieweb-font-mono);
}

/* ============================================
   Utility Classes
   ============================================ */

.mieweb-card {
  background-color: var(--mieweb-card);
  color: var(--mieweb-card-foreground);
  border-radius: var(--mieweb-radius-lg);
  box-shadow: var(--mieweb-shadow-card);
}

.mieweb-button-primary {
  background-color: var(--mieweb-primary-500);
  color: white;
  border-radius: var(--mieweb-radius-md);
}

.mieweb-button-primary:hover {
  background-color: var(--mieweb-primary-600);
}

.mieweb-input {
  border: 1px solid var(--mieweb-input);
  border-radius: var(--mieweb-radius-md);
  background-color: var(--mieweb-background);
  color: var(--mieweb-foreground);
}

.mieweb-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--mieweb-ring);
}