/* ============================================================
   HEMOCARE - CSS Variables (Design Tokens)
   Material Design 3 inspired
   ============================================================ */

:root {
  /* === BRAND COLORS === */
  --primary-50:  #e0f7ff;
  --primary-100: #b3e6ff;
  --primary-200: #80d6ff;
  --primary-300: #4dc6ff;
  --primary-400: #1ab6ff;
  --primary-500: #04b2d9;   /* main - nova cor solicitada */
  --primary-600: #03a0c6;
  --primary-700: #038eb3;
  --primary-800: #027c9f;
  --primary-900: #016a8b;

  --primary:        var(--primary-500);
  --primary-dark:   var(--primary-700);
  --primary-light:  var(--primary-200);

  /* === SEMANTIC === */
  --success:  #2e7d32;
  --success-light: #e8f5e9;
  --success-border: #a5d6a7;

  --warning:  #f57c00;
  --warning-light: #fff3e0;
  --warning-border: #ffcc80;

  --danger:   #c62828;
  --danger-light: #ffebee;
  --danger-border: #ef9a9a;

  --info:     #04b2d9;
  --info-light: #e0f7ff;
  --info-border: #80d6ff;

  --purple:   #6a1b9a;
  --purple-light: #f3e5f5;

  --teal:     #00695c;
  --teal-light: #e0f2f1;

  /* === STATUS COLORS === */
  --status-funcionando: #2e7d32;
  --status-preventiva:  #f57c00;
  --status-corretiva:   #c62828;
  --status-parado:      #b71c1c;
  --status-teste:       #04b2d9;
  --status-desativado:  #616161;

  /* === PRIORITY COLORS === */
  --priority-baixa:    #43a047;
  --priority-media:    #fb8c00;
  --priority-alta:     #e53935;
  --priority-critica:  #6a1b9a;

  /* === NEUTRAL === */
  --gray-50:  #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eeeeee;
  --gray-300: #e0e0e0;
  --gray-400: #bdbdbd;
  --gray-500: #9e9e9e;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;

  /* === LIGHT THEME === */
  --bg-body:      #f0f4f8;
  --bg-surface:   #ffffff;
  --bg-surface-2: #f8fafc;
  --bg-sidebar:   #038eb3;
  --bg-sidebar-dark: #016a8b;
  --bg-topbar:    #ffffff;

  --text-primary:   #1a2332;
  --text-secondary: #546e7a;
  --text-muted:     #90a4ae;
  --text-sidebar:   rgba(255,255,255,0.85);
  --text-sidebar-active: #ffffff;

  --border-color:   #e3e8ef;
  --border-light:   #f0f4f8;

  /* === SHADOWS === */
  --shadow-xs:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.14), 0 8px 20px rgba(0,0,0,0.10);
  --shadow-card: 0 2px 12px rgba(13,115,119,0.10), 0 1px 4px rgba(0,0,0,0.04);

  /* === LAYOUT === */
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --topbar-height: 64px;
  --content-padding: 24px;
  --border-radius: 12px;
  --border-radius-sm: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --border-radius-pill: 50px;

  /* === TRANSITIONS === */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === TYPOGRAPHY === */
  --font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 14px;
  --font-size-md:   15px;
  --font-size-lg:   16px;
  --font-size-xl:   18px;
  --font-size-2xl:  22px;
  --font-size-3xl:  28px;
  --font-size-4xl:  36px;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:  1.2;
  --line-height-base:   1.5;
  --line-height-loose:  1.8;

  /* === Z-INDEX === */
  --z-sidebar:   200;
  --z-topbar:    100;
  --z-modal:     500;
  --z-toast:     600;
  --z-tooltip:   700;
  --z-overlay:   150;
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
  --bg-body:      #0f1724;
  --bg-surface:   #1a2435;
  --bg-surface-2: #1e2c3d;
  --bg-sidebar:   #074f52;
  --bg-sidebar-dark: #043d40;
  --bg-topbar:    #1a2435;

  --text-primary:   #e8edf4;
  --text-secondary: #8fa3b8;
  --text-muted:     #546e7a;
  --text-sidebar:   rgba(255,255,255,0.75);
  --text-sidebar-active: #ffffff;

  --border-color:   #243347;
  --border-light:   #1e2c3d;

  --shadow-xs:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.3);
}