/* css/themes.css — KliniKo color system and theme variables */

:root {
  /* Brand — Medical teal */
  --color-primary: #0d9488;
  --color-primary-dark: #0f766e;
  --color-primary-light: #14b8a6;
  --color-primary-xlight: #ccfbf1;
  --color-primary-subtle: #f0fdfa;

  /* Status colors */
  --color-success: #10b981;
  --color-success-dark: #059669;
  --color-success-bg: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-dark: #d97706;
  --color-warning-bg: #fef3c7;
  --color-danger: #ef4444;
  --color-danger-dark: #dc2626;
  --color-danger-bg: #fee2e2;
  --color-info: #3b82f6;
  --color-info-bg: #dbeafe;

  /* Priority/Amber */
  --color-priority: #f59e0b;
  --color-priority-dark: #d97706;
  --color-priority-bg: #fffbeb;
  --color-priority-border: #fcd34d;

  /* Typography */
  --font-family: 'Plus Jakarta Sans', 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: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 40px;

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

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
  --shadow-card: 0 2px 8px rgba(13,148,136,0.08);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ===== LIGHT THEME (default) ===== */
:root,
[data-theme="light"] {
  --bg-base: #f0faf9;
  --bg-card: #ffffff;
  --bg-card-alt: #f8fffe;
  --bg-input: #f5fcfb;
  --bg-hover: #e6f7f5;
  --bg-overlay: rgba(0, 0, 0, 0.4);

  --border-color: #b2dfdb;
  --border-input: #80cbc4;
  --border-focus: #0d9488;

  --text-primary: #0d2b27;
  --text-secondary: #2d6a63;
  --text-muted: #6b9e99;
  --text-placeholder: #9eccc8;
  --text-inverse: #ffffff;
  --text-on-primary: #ffffff;

  --header-bg: #0d9488;
  --header-text: #ffffff;
  --header-border: #0f766e;

  --sidebar-bg: #ffffff;
  --sidebar-border: #b2dfdb;
  --sidebar-active: #e6f7f5;

  --queue-card-bg: #ffffff;
  --queue-card-border: #b2dfdb;
  --queue-number-bg: #e6f7f5;
  --queue-number-text: #0d9488;

  --priority-card-bg: #fffbeb;
  --priority-card-border: #fcd34d;
  --priority-badge-bg: #f59e0b;
  --priority-badge-text: #ffffff;

  --serving-card-bg: #f0fdfa;
  --serving-card-border: #14b8a6;

  --input-bg: #ffffff;
  --input-border: #b2dfdb;
  --input-text: #0d2b27;

  --modal-bg: #ffffff;
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --modal-handle: #b2dfdb;

  --toast-success-bg: #059669;
  --toast-error-bg: #dc2626;
  --toast-info-bg: #0d9488;
  --toast-text: #ffffff;

  --divider: #e0f2f1;

  color-scheme: light;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --bg-base: #0a1628;
  --bg-card: #0f2038;
  --bg-card-alt: #132943;
  --bg-input: #0d1e35;
  --bg-hover: #162d47;
  --bg-overlay: rgba(0, 0, 0, 0.6);

  --border-color: #1e3a5f;
  --border-input: #2a4f72;
  --border-focus: #14b8a6;

  --text-primary: #e2f0ef;
  --text-secondary: #94c9c4;
  --text-muted: #5a8a85;
  --text-placeholder: #3a6a65;
  --text-inverse: #0a1628;
  --text-on-primary: #ffffff;

  --header-bg: #0c1c30;
  --header-text: #e2f0ef;
  --header-border: #1e3a5f;

  --sidebar-bg: #0f2038;
  --sidebar-border: #1e3a5f;
  --sidebar-active: #162d47;

  --queue-card-bg: #0f2038;
  --queue-card-border: #1e3a5f;
  --queue-number-bg: #132943;
  --queue-number-text: #14b8a6;

  --priority-card-bg: #1a1700;
  --priority-card-border: #7c5c00;
  --priority-badge-bg: #d97706;
  --priority-badge-text: #ffffff;

  --serving-card-bg: #0a2420;
  --serving-card-border: #0d9488;

  --input-bg: #0d1e35;
  --input-border: #2a4f72;
  --input-text: #e2f0ef;

  --modal-bg: #0f2038;
  --modal-overlay: rgba(0, 0, 0, 0.7);
  --modal-handle: #1e3a5f;

  --toast-success-bg: #059669;
  --toast-error-bg: #dc2626;
  --toast-info-bg: #0d9488;
  --toast-text: #ffffff;

  --divider: #1e3a5f;

  color-scheme: dark;
}