/* ==========================================================================
   Painel — tokens no padrão "Oficina Ultra" (neutros quentes, cantos de 5px,
   Inter). O destaque segue a "cor dos botões" do estúdio (Aparência): --brand,
   aplicada por js/utils/brand.js; o padrão é a paleta nude do Agendella. Carregado só no painel, logo depois de tokens.css: redefine as
   mesmas variáveis, então o site público continua com as cores da Aparência.
   Os componentes do painel usam também os nomes curtos (--bg, --surface,
   --blue...) do design system de origem.
   ========================================================================== */
:root {
  /* Neutros */
  --bg: #F4F1EC;
  --surface: #FFFFFF;
  --surface2: #F4F1EC;
  --surface3: #EBE5DC;
  --border: #DAD2C6;
  --border2: #C4BAAC;
  --divider: #ECE6DD;

  --text: #1E1D1A;
  --text2: #5A5955;
  --text3: #8C8A84;

  /* Destaque principal: a cor dos botões do estúdio (nomes --blue mantidos do design system de origem) */
  --brand: #6B503B;
  --brand-text: #FFFFFF;
  --blue: var(--brand);
  --blue-bg: color-mix(in srgb, var(--brand) 15%, #FFFFFF);
  --blue-mid: color-mix(in srgb, var(--brand) 78%, #FFFFFF);
  --blue-text: color-mix(in srgb, var(--brand) 85%, #000000);

  --green: #16A34A;
  --green-bg: #DCFCE7;
  --green-mid: #22C55E;
  --green-text: #15803D;
  --red: #DC2626;
  --red-bg: #FEE2E2;
  --red-mid: #EF4444;
  --red-text: #B91C1C;
  --amber: #D97706;
  --amber-bg: #FEF3C7;
  --amber-mid: #F59E0B;
  --amber-text: #B45309;
  --orange: #EA580C;
  --orange-bg: #FFEDD5;
  --orange-mid: #F97316;
  --orange-text: #C2410C;

  --gap: 10px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .05);

  /* Variáveis do Agendella apontando para a paleta acima */
  --primary-color: var(--text);
  --secondary-color: var(--blue);
  --background-color: var(--bg);
  --surface-color: var(--surface);
  --text-color: var(--text);
  --button-color: var(--blue);
  --button-text-color: var(--brand-text);

  --text-muted: var(--text2);
  --text-soft: var(--text3);
  --line: var(--border);
  --line-soft: var(--divider);
  --surface-raised: var(--surface);
  --surface-sunken: var(--surface3);
  --accent-soft: var(--blue-bg);
  --focus-ring: color-mix(in srgb, var(--blue) 70%, transparent);

  --success: var(--green-text);
  --success-soft: var(--green-bg);
  --danger: var(--red);
  --danger-soft: var(--red-bg);
  --warning: var(--amber-text);
  --warning-soft: var(--amber-bg);
  --info: var(--blue-text);
  --info-soft: var(--blue-bg);

  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1rem;
  --fs-xl: 1.25rem;

  /* Cantos padronizados em 5px (cards, tabelas, modais, botões, campos) */
  --radius-xs: 5px;
  --radius-sm: 5px;
  --radius: 5px;
  --radius-lg: 5px;
  --radius-pill: 5px;

  --shadow-xs: var(--shadow);
  --shadow-sm: var(--shadow);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .14);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .18);

  --tap: 38px;
}

/* Modo escuro: data-theme="dark" em <html> (admin-theme-init.js) */
:root[data-theme='dark'] {
  --bg: #131313;
  --surface: #1B1B1B;
  --surface2: #131313;
  --surface3: #262626;
  --border: #333333;
  --border2: #3D3D3D;
  --divider: #242424;

  --text: #EDEDED;
  --text2: #A3A3A3;
  --text3: #78787A;

  --blue: color-mix(in srgb, var(--brand) 72%, #FFFFFF);
  --blue-bg: color-mix(in srgb, var(--brand) 38%, #131313);
  --blue-mid: color-mix(in srgb, var(--brand) 55%, #FFFFFF);
  --blue-text: color-mix(in srgb, var(--brand) 42%, #FFFFFF);

  --green: #22C55E;
  --green-bg: #14432B;
  --green-mid: #4ADE80;
  --green-text: #86EFAC;
  --red: #EF4444;
  --red-bg: #5C1A1A;
  --red-mid: #F87171;
  --red-text: #FCA5A5;
  --amber: #F59E0B;
  --amber-bg: #4A2E0B;
  --amber-mid: #FBBF24;
  --amber-text: #FCD34D;
  --orange: #F97316;
  --orange-bg: #4A2410;
  --orange-mid: #FB923C;
  --orange-text: #FDBA74;

  --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}