/* ═══════════════════════════════════════════════════════════════════════════
   VetERP Design Tokens — Sistema de Design Veterinário
   Tema: Teal/Verde confiança + âmbar energia + branco limpeza
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── VetSpace brand identity ─────────────────────────────────────────── */
  --vetspace-primary:       #1FBF75;
  --vetspace-primary-light: #32D88A;
  --vetspace-primary-dark:  #138A54;

  /* ── Cores primárias (Teal — confiança e saúde) ──────────────────────── */
  --color-primary-50:  #f0fdfa;
  --color-primary-100: #ccfbf1;
  --color-primary-200: #99f6e4;
  --color-primary-300: #5eead4;
  --color-primary-400: #2dd4bf;
  --color-primary-500: #14b8a6;
  --color-primary-600: #0d9488;
  --color-primary-700: #0f766e;
  --color-primary-800: #115e59;
  --color-primary-900: #134e4a;
  --color-primary-950: #042f2e;

  /* ── Cor de acento (Âmbar — energia e vitalidade) ────────────────────── */
  --color-accent-100: #fef3c7;
  --color-accent-300: #fcd34d;
  --color-accent-400: #fbbf24;
  --color-accent-500: #f59e0b;
  --color-accent-600: #d97706;
  --color-accent-700: #b45309;

  /* ── Tons neutros ────────────────────────────────────────────────────── */
  --color-gray-50:  #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* ── Estados semânticos ──────────────────────────────────────────────── */
  --color-success-50:  #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;

  --color-warning-50:  #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;

  --color-error-50:  #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;

  --color-info-50:  #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-200: #bfdbfe;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;
  --color-info-700: #1d4ed8;

  /* ── Superfícies ─────────────────────────────────────────────────────── */
  --color-bg:         #F6FAF8;
  --color-surface:    #FFFFFF;
  --color-surface-2:  #FBFCFB;
  --color-border:     #E4ECE7;
  --color-border-focus: var(--color-primary-500);

  /* ── Texto ───────────────────────────────────────────────────────────── */
  --color-text-primary:   var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  --color-text-muted:     var(--color-gray-600);
  --color-text-inverse:   #ffffff;
  --color-text-brand:     var(--color-primary-700);

  /* ── Tipografia ──────────────────────────────────────────────────────── */
  --font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-md:   1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  1.875rem;   /* 30px */
  --font-size-4xl:  2.25rem;    /* 36px */
  --font-size-5xl:  3rem;       /* 48px */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold: 800;
  --line-height-tight:  1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ── Espaçamento ─────────────────────────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* ── Bordas ──────────────────────────────────────────────────────────── */
  --radius-sm:   0.375rem;  /* 6px  */
  --radius-md:   0.5rem;    /* 8px  */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ── Sombras ─────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-brand: 0 4px 14px 0 rgb(13 148 136 / 0.3);
  --shadow-brand-lg: 0 8px 30px rgb(13 148 136 / 0.25);

  /* ── Transições ──────────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ── Z-index ─────────────────────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-sidebar:  200;
  --z-topbar:   300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --sidebar-width:        280px;
  --sidebar-collapsed:    72px;
  --topbar-height:        64px;
  --content-max-width:    1280px;
  --auth-panel-width:     65%;
  --auth-form-max-width:  530px;

  /* ── VetSpace UI System aliases (--vs-*) ─────────────────────────────── */
  --vs-primary:           #177A67;
  --vs-primary-dark:      #0E4F45;
  --vs-primary-light:     #DDF2EC;
  --vs-success:           #2BAE66;
  --vs-warning:           #F5B041;
  --vs-error:             #E75A5A;
  --vs-info:              #5B8DEF;
  --vs-bg:                var(--color-bg);
  --vs-surface:           var(--color-surface);
  --vs-border:            var(--color-border);
  --vs-border-green:      rgba(28, 63, 47, .06);
  --vs-text:              var(--color-text-primary);
  --vs-text-muted:        var(--color-text-muted);
  --vs-radius-sm:         12px;
  --vs-radius-md:         16px;
  --vs-radius-lg:         24px;
  --vs-sidebar-bg:        #FAFBFA;
  --vs-shadow-light:      0 10px 25px rgba(18, 41, 31, .05);
  --vs-shadow-dark:       0 10px 35px rgba(0,0,0,.35);
  --vs-shadow:            var(--vs-shadow-light);
  --vs-transition:        var(--transition-normal);

  /* ── Profile/Capsule component tokens — reutilizáveis ───────────────── */
  --uc-avatar-gradient:   linear-gradient(135deg, #16B88E, #087A61);
  --uc-avatar-glow:       rgba(22,184,142,.20);
  --uc-online-dot:        #22c55e;
  --uc-capsule-radius:    18px;
  --uc-card-radius:       16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — Ativado via [data-theme="dark"] no elemento <html>
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* Superfícies */
  --color-bg:         #0D1117;
  --color-surface:    #111827;
  --color-surface-2:  #161B22;
  --color-border:     #1F2937;
  --color-border-focus: var(--color-primary-400);

  /* Texto */
  --color-text-primary:   #e6edf3;
  --color-text-secondary: #8b949e;
  --color-text-muted:     #6e7681;
  --color-text-inverse:   #0d1117;
  --color-text-brand:     var(--color-primary-400);

  /* Primárias em dark — ligeiramente mais brilhantes para contraste */
  --color-primary-50:  #0d2e2a;
  --color-primary-100: #134e4a;
  --color-primary-200: #115e59;
  --color-primary-300: #0f766e;
  --color-primary-400: #0d9488;
  --color-primary-500: #14b8a6;
  --color-primary-600: #2dd4bf;
  --color-primary-700: #5eead4;
  --color-primary-800: #99f6e4;
  --color-primary-900: #ccfbf1;
  --color-primary-950: #f0fdfa;

  /* Sombras em dark */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.5);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.6);
  --shadow-brand: 0 4px 14px 0 rgb(13 148 136 / 0.4);
  --shadow-brand-lg: 0 8px 30px rgb(13 148 136 / 0.35);

  /* Tons neutros em dark (invertidos para uso nos componentes) */
  --color-gray-50:  #1c2128;
  --color-gray-100: #21262d;
  --color-gray-200: #30363d;
  --color-gray-300: #3d444d;
  --color-gray-400: #6e7681;
  --color-gray-500: #8b949e;
  --color-gray-600: #adbac7;
  --color-gray-700: #cdd9e5;
  --color-gray-800: #e3eef9;
  --color-gray-900: #f0f6fc;

  /* Estados semânticos dark — fundos escuros tintados, texto claro legível */
  --color-success-50:  #052e16;
  --color-success-100: #14532d;
  --color-success-200: #166534;
  --color-success-500: #4ade80;
  --color-success-600: #22c55e;
  --color-success-700: #86efac;

  --color-warning-50:  #1c0a00;
  --color-warning-100: #451a03;
  --color-warning-200: #92400e;
  --color-warning-500: #fbbf24;
  --color-warning-600: #f59e0b;
  --color-warning-700: #fde68a;

  --color-error-50:  #1e0a0a;
  --color-error-100: #450a0a;
  --color-error-200: #7f1d1d;
  --color-error-500: #f87171;
  --color-error-600: #ef4444;
  --color-error-700: #fca5a5;

  --color-info-50:  #0c1a3a;
  --color-info-100: #1e3a5f;
  --color-info-200: #1e40af;
  --color-info-500: #60a5fa;
  --color-info-600: #3b82f6;
  --color-info-700: #93c5fd;

  /* Acento dark */
  --color-accent-100: #451a03;

  /* VetSpace UI System — dark mode overrides */
  --vs-bg:            #0D1117;
  --vs-surface:       #111827;
  --vs-card-bg:       rgba(17,24,39,.97);
  --vs-card-border:   rgba(255,255,255,.06);
  --vs-card-shadow:   0 8px 24px rgba(0,0,0,.20);
  --vs-border-green:  rgba(255,255,255,.05);
  --vs-shadow:        var(--vs-shadow-dark);
}