/* EMR Design System - CSS Variables
 * Google Docs-inspired design system for EMR Application
 * Version: 1.0.0
 */

:root {
  /* ========================================
   * COLOR PALETTE
   * ======================================== */

  /* Primary Colors */
  --emr-primary: #1a73e8;
  --emr-primary-hover: #1557b0;
  --emr-primary-active: #174ea6;
  --emr-primary-light: #e8f0fe;
  --emr-primary-rgb: 26, 115, 232;

  /* Secondary Colors */
  --emr-secondary: #e8f0fe;
  --emr-secondary-hover: #d2e3fc;

  /* Text Colors */
  --emr-text-primary: #202124;
  --emr-text-secondary: #5f6368;
  --emr-text-tertiary: #80868b;
  --emr-text-disabled: #9aa0a6;
  --emr-text-inverse: #ffffff;

  /* Background Colors */
  --emr-bg-main: #f8f9fa;
  --emr-bg-panel: #ffffff;
  --emr-bg-elevated: #ffffff;
  --emr-bg-hover: #f1f3f4;
  --emr-bg-selected: #e8f0fe;
  --emr-bg-active: #d2e3fc;

  /* Border Colors */
  --emr-border: #dadce0;
  --emr-border-light: #e8eaed;
  --emr-border-dark: #c0c4c9;
  --emr-border-focus: #1a73e8;

  /* Status Colors */
  --emr-status-signed: #137333;
  --emr-status-signed-bg: #e6f4ea;
  --emr-status-signed-border: #ceead6;

  --emr-status-missing: #b06000;
  --emr-status-missing-bg: #fef7e0;
  --emr-status-missing-border: #fde293;

  --emr-status-unsigned: #5f6368;
  --emr-status-unsigned-bg: #f1f3f4;
  --emr-status-unsigned-border: #dadce0;

  --emr-status-error: #d93025;
  --emr-status-error-bg: #fce8e6;
  --emr-status-error-border: #f5c6cb;

  --emr-status-success: #1e8e3e;
  --emr-status-success-bg: #e6f4ea;
  --emr-status-success-border: #ceead6;

  --emr-status-warning: #f9ab00;
  --emr-status-warning-bg: #fef7e0;
  --emr-status-warning-border: #fde293;

  --emr-status-info: #1a73e8;
  --emr-status-info-bg: #e8f0fe;
  --emr-status-info-border: #d2e3fc;

  /* ========================================
   * LAYOUT DIMENSIONS
   * ======================================== */

  --emr-header-height: 64px;
  --emr-nav-width: 68px;
  --emr-nav-width-expanded: 256px;
  --emr-sidebar-width: 280px;
  --emr-sidebar-min-width: 200px;
  --emr-sidebar-max-width: 400px;
  --emr-preview-width: 320px;
  --emr-preview-min-width: 280px;
  --emr-preview-max-width: 600px;

  /* ========================================
   * SPACING SCALE
   * ======================================== */

  --emr-space-xxs: 2px;
  --emr-space-xs: 4px;
  --emr-space-sm: 8px;
  --emr-space-md: 12px;
  --emr-space-lg: 16px;
  --emr-space-xl: 20px;
  --emr-space-xxl: 24px;
  --emr-space-xxxl: 32px;

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

  --emr-font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --emr-font-family-mono: 'Roboto Mono', 'Consolas', 'Monaco', monospace;

  /* Font Sizes */
  --emr-font-size-xs: 11px;
  --emr-font-size-sm: 12px;
  --emr-font-size-base: 14px;
  --emr-font-size-md: 16px;
  --emr-font-size-lg: 18px;
  --emr-font-size-xl: 20px;
  --emr-font-size-xxl: 24px;
  --emr-font-size-xxxl: 32px;

  /* Font Weights */
  --emr-font-weight-normal: 400;
  --emr-font-weight-medium: 500;
  --emr-font-weight-semibold: 600;
  --emr-font-weight-bold: 700;

  /* Line Heights */
  --emr-line-height-tight: 1.2;
  --emr-line-height-normal: 1.4;
  --emr-line-height-relaxed: 1.6;

  /* ========================================
   * SHADOWS
   * ======================================== */

  --emr-shadow-xs: 0 1px 2px rgba(60, 64, 67, 0.1);
  --emr-shadow-sm: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px rgba(60, 64, 67, 0.15);
  --emr-shadow-md: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px rgba(60, 64, 67, 0.15);
  --emr-shadow-lg: 0 2px 6px rgba(60, 64, 67, 0.3), 0 8px 16px rgba(60, 64, 67, 0.15);
  --emr-shadow-xl: 0 4px 8px rgba(60, 64, 67, 0.3), 0 16px 24px rgba(60, 64, 67, 0.15);

  --emr-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
  --emr-shadow-card-hover: 0 4px 6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  --emr-shadow-dropdown: 0 2px 6px rgba(60, 64, 67, 0.15), 0 8px 24px rgba(60, 64, 67, 0.2);
  --emr-shadow-modal: 0 8px 10px -6px rgba(60, 64, 67, 0.3), 0 24px 48px rgba(60, 64, 67, 0.25);

  /* ========================================
   * BORDER RADIUS
   * ======================================== */

  --emr-radius-xs: 2px;
  --emr-radius-sm: 4px;
  --emr-radius-md: 8px;
  --emr-radius-lg: 12px;
  --emr-radius-xl: 16px;
  --emr-radius-xxl: 20px;
  --emr-radius-full: 9999px;

  /* ========================================
   * TRANSITIONS
   * ======================================== */

  --emr-transition-fast: 100ms ease-in-out;
  --emr-transition-normal: 200ms ease-in-out;
  --emr-transition-slow: 300ms ease-in-out;
  --emr-transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ========================================
   * Z-INDEX SCALE
   * ======================================== */

  --emr-z-dropdown: 100;
  --emr-z-sticky: 200;
  --emr-z-fixed: 300;
  --emr-z-modal-backdrop: 400;
  --emr-z-modal: 500;
  --emr-z-popover: 600;
  --emr-z-tooltip: 700;
  --emr-z-toast: 800;
}

/* ========================================
 * DARK MODE (Future support)
 * ======================================== */

@media (prefers-color-scheme: dark) {
  :root.dark-mode {
    --emr-text-primary: #e8eaed;
    --emr-text-secondary: #9aa0a6;
    --emr-bg-main: #202124;
    --emr-bg-panel: #292a2d;
    --emr-bg-elevated: #35363a;
    --emr-bg-hover: #3c4043;
    --emr-border: #5f6368;
    --emr-border-light: #3c4043;
  }
}