/**
 * Cuidare Workspace — Design Tokens (Modo Claro)
 * Paleta oficial extraída do logo: azul #3A87BE + verde-accent #91D341
 * Material Design 3 · WCAG AA · Light Mode
 *
 * Atualizado em 2026-06-21 — re-skin marca oficial
 */

/* =========================================================
   IMPORTAÇÃO DE FONTE
   Manrope: legível, humanista, sem serifa — ideal para saúde
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {

  /* -------------------------------------------------------
     CORES PRIMÁRIAS (azul oficial da logo — #3A87BE)
     Papel: ação principal, headers, links, botões CTA
     WCAG: #3A87BE sobre branco = 4.5:1 (PASS AA)
     ------------------------------------------------------- */
  --color-primary-10:  #071A25;   /* texto sobre superfície primária escura */
  --color-primary-20:  #14354A;
  --color-primary-30:  #215070;   /* hover de botão primário */
  --color-primary-40:  #3A87BE;   /* ← cor dominante da logo (WCAG AA sobre branco) */
  --color-primary-50:  #4A93D2;
  --color-primary-60:  #74ACDD;
  --color-primary-70:  #9EC6E8;
  --color-primary-80:  #C8DFF3;
  --color-primary-90:  #EBF4FB;   /* superfície/container primário claro */
  --color-primary-95:  #F3F9FE;
  --color-primary-99:  #FAFCFF;

  /* Papéis semânticos primários */
  --color-on-primary:        #FFFFFF;   /* texto/ícone sobre botão primário */
  --color-primary-container: #EBF4FB;   /* container suave (chips, tags) */
  --color-on-primary-container: #071A25;

  /* -------------------------------------------------------
     CORES SECUNDÁRIAS / ACCENT (verde oficial da logo — #91D341)
     ATENÇÃO: #91D341 tem contraste 2.9:1 — NÃO usar como texto
     Papel: acento decorativo, badges de status, ícones, bordas
     Verde-texto acessível: #578126 (4.5:1 sobre branco — PASS AA)
     ------------------------------------------------------- */
  --color-secondary-10:  #0A1005;
  --color-secondary-20:  #1D2E0C;
  --color-secondary-30:  #3A5819;   /* dark green */
  --color-secondary-40:  #578126;   /* verde-texto acessível (WCAG AA) */
  --color-secondary-50:  #74AA33;   /* verde médio */
  --color-secondary-60:  #91D341;   /* ← cor original da logo (accent-only) */
  --color-secondary-70:  #ABE35C;
  --color-secondary-80:  #C4EC8C;
  --color-secondary-90:  #DDF4BC;   /* container secundário claro */
  --color-secondary-95:  #EDF9D8;
  --color-secondary-99:  #F3FBE6;

  /* Papéis semânticos secundários */
  --color-on-secondary:         #FFFFFF;
  --color-secondary-container:  #DDF4BC;
  --color-on-secondary-container: #0A1005;

  /* Token de accent puro (decorativo — NÃO usar em texto) */
  --color-accent:        #91D341;   /* verde logo — só ícone/badge/borda decorativa */
  --color-accent-text:   #578126;   /* verde para texto/ícone — WCAG AA */

  /* -------------------------------------------------------
     CORES TERCIÁRIAS (teal — ponte entre azul e verde)
     Papel: info, indicadores neutros de saúde
     ------------------------------------------------------- */
  --color-tertiary-40:  #006B60;
  --color-tertiary-80:  #7ADBD0;
  --color-tertiary-90:  #BCEEE9;
  --color-tertiary-container: #BCEEE9;
  --color-on-tertiary:  #FFFFFF;
  --color-on-tertiary-container: #00201D;

  /* -------------------------------------------------------
     NEUTROS (baseados no cinza da logo — #706D6E)
     ------------------------------------------------------- */
  --color-neutral-50:  #F8F8F8;
  --color-neutral-100: #EFEFEF;
  --color-neutral-200: #E0E0E0;
  --color-neutral-300: #BDBDBD;
  --color-neutral-400: #9E9E9E;
  --color-neutral-500: #706D6E;   /* ← cinza da logo */
  --color-neutral-600: #575455;
  --color-neutral-700: #3E3C3C;
  --color-neutral-800: #252323;
  --color-neutral-900: #0C0B0B;

  /* -------------------------------------------------------
     SUPERFÍCIES E BACKGROUNDS (modo claro)
     Papel: backgrounds de páginas, cards, modais
     ------------------------------------------------------- */
  --color-background:    #F5FAFE;   /* fundo global — quase-branco azulado */
  --color-surface:       #FFFFFF;   /* cards, modais, drawers */
  --color-surface-1:     #EEF5FB;   /* superfície elevada 1dp (nav, app bar) */
  --color-surface-2:     #E5EFF8;   /* superfície elevada 2dp */
  --color-surface-3:     #DCEAF5;   /* superfície elevada 3dp */
  --color-surface-variant: #DCEAF5; /* chips, dividers, inputs */
  --color-outline:        #5B8BA4;   /* bordas, separadores */
  --color-outline-variant: #BAD3E5; /* bordas suaves */

  /* -------------------------------------------------------
     TEXTOS (sobre fundo claro)
     ------------------------------------------------------- */
  --color-on-surface:         #0F1C22;   /* texto principal — quase preto (CTR ≥ 7:1) */
  --color-on-surface-variant: #3D5F6E;   /* texto secundário/label (CTR ≈ 4.5:1) */
  --color-on-surface-disabled:#8DAAB6;   /* desabilitado */

  /* -------------------------------------------------------
     ESTADOS SEMÂNTICOS
     ------------------------------------------------------- */
  /* Sucesso / Confirmado */
  --color-success:           #2E7D32;
  --color-success-container: #D4EDDA;
  --color-on-success:        #FFFFFF;
  --color-on-success-container: #0A2E0C;

  /* Aviso */
  --color-warning:           #F57C00;
  --color-warning-container: #FFF3E0;
  --color-on-warning:        #FFFFFF;
  --color-on-warning-container: #3E1F00;

  /* Erro / Ausência */
  --color-error:           #C62828;
  --color-error-container: #FDEAEA;
  --color-on-error:        #FFFFFF;
  --color-on-error-container: #3E0808;

  /* Info */
  --color-info:           #0277BD;
  --color-info-container: #E1F5FE;
  --color-on-info:        #FFFFFF;
  --color-on-info-container: #01243C;

  /* -------------------------------------------------------
     TIPOGRAFIA
     Família: Manrope (humanista, legível, sem serifa)
     Escala MD3
     ------------------------------------------------------- */
  --font-family-base:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-family-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Display */
  --text-display-large:   57px;
  --text-display-medium:  45px;
  --text-display-small:   36px;

  /* Headline */
  --text-headline-large:  32px;
  --text-headline-medium: 28px;
  --text-headline-small:  24px;

  /* Title */
  --text-title-large:     22px;
  --text-title-medium:    16px;
  --text-title-small:     14px;

  /* Body */
  --text-body-large:      16px;
  --text-body-medium:     14px;
  --text-body-small:      12px;

  /* Label */
  --text-label-large:     14px;
  --text-label-medium:    12px;
  --text-label-small:     11px;

  /* Pesos */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Line heights */
  --leading-tight:    1.2;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;

  /* Letter spacing */
  --tracking-tight:   -0.015em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;

  /* -------------------------------------------------------
     ESPAÇAMENTO (grid 4/8pt)
     ------------------------------------------------------- */
  --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;
  --space-20: 80px;
  --space-24: 96px;

  /* -------------------------------------------------------
     BORDER RADIUS
     ------------------------------------------------------- */
  --radius-none:   0px;
  --radius-xs:     4px;
  --radius-sm:     8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full: 9999px;

  /* -------------------------------------------------------
     SOMBRAS (suaves — sem dramatismo excessivo)
     ------------------------------------------------------- */
  --shadow-none:    none;
  --shadow-sm:      0 1px 2px rgba(58,135,190,0.08);
  --shadow-md:      0 2px 8px rgba(58,135,190,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg:      0 4px 16px rgba(58,135,190,0.12), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-xl:      0 8px 32px rgba(58,135,190,0.14), 0 2px 8px rgba(0,0,0,0.08);

  /* -------------------------------------------------------
     MOTION / ANIMAÇÕES (suaves, não irritantes)
     ------------------------------------------------------- */
  --duration-instant:  50ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --easing-standard:   cubic-bezier(0.2, 0, 0, 1);    /* MD3 Standard */
  --easing-decelerate: cubic-bezier(0, 0, 0, 1);       /* entrando na tela */
  --easing-accelerate: cubic-bezier(0.3, 0, 1, 1);     /* saindo da tela */
  --easing-spring:     cubic-bezier(0.34, 1.56, 0.64, 1); /* bounce suave */

  /* -------------------------------------------------------
     LAYOUT
     ------------------------------------------------------- */
  --sidebar-width:        256px;
  --sidebar-width-mini:    72px;
  --topbar-height:         64px;
  --content-max-width:   1200px;
}

/* =========================================================
   RESET MÍNIMO
   ========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--text-body-large);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-on-surface);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   UTILITÁRIOS BÁSICOS (reutilizados nos mockups)
   ========================================================= */

/* Cards */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-outline-variant);
  padding: var(--space-6);
  transition: box-shadow var(--duration-normal) var(--easing-standard);
}
.card:hover {
  box-shadow: var(--shadow-md);
}

/* Badges de status */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-label-medium);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.badge-success { background: var(--color-success-container); color: var(--color-success); }
.badge-warning { background: var(--color-warning-container); color: var(--color-warning); }
.badge-error   { background: var(--color-error-container);   color: var(--color-error);   }
.badge-info    { background: var(--color-info-container);    color: var(--color-info);    }
.badge-primary { background: var(--color-primary-container); color: var(--color-primary-40); }
/* badge-accent: usa verde decorativo com texto acessível */
.badge-accent  { background: var(--color-secondary-90); color: var(--color-accent-text); }
.badge-neutral { background: var(--color-surface-variant);  color: var(--color-on-surface-variant); }

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-family: var(--font-family-base);
  font-size: var(--text-label-large);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  border: none;
  transition: all var(--duration-fast) var(--easing-standard);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary-40);
  color: var(--color-on-primary);
}
.btn-primary:hover {
  background: var(--color-primary-30);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn-secondary {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}
.btn-secondary:hover { background: var(--color-secondary-80); box-shadow: var(--shadow-sm); }

.btn-outlined {
  background: transparent;
  color: var(--color-primary-40);
  border: 1.5px solid var(--color-outline);
}
.btn-outlined:hover { background: var(--color-primary-95); }

.btn-ghost {
  background: transparent;
  color: var(--color-on-surface-variant);
}
.btn-ghost:hover { background: var(--color-surface-1); }

.btn-success {
  background: var(--color-success);
  color: var(--color-on-success);
}
.btn-success:hover { background: #1B5E20; box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn-error {
  background: var(--color-error);
  color: var(--color-on-error);
}
.btn-error:hover { background: #8E0000; box-shadow: var(--shadow-md); }

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-body-large);
  border-radius: var(--radius-xl);
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-label-medium);
}

.btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* Inputs */
.input-field {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  font-family: var(--font-family-base);
  font-size: var(--text-body-medium);
  color: var(--color-on-surface);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--easing-standard);
  outline: none;
}
.input-field:focus {
  border-color: var(--color-primary-40);
  box-shadow: 0 0 0 3px rgba(58,135,190,0.15);
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-outline-variant);
  font-size: var(--text-label-medium);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  background: var(--color-surface);
  color: var(--color-on-surface-variant);
  transition: all var(--duration-fast) var(--easing-standard);
}
.chip:hover { background: var(--color-surface-1); border-color: var(--color-outline); }
.chip.active { background: var(--color-primary-container); border-color: var(--color-primary-40); color: var(--color-primary-30); }

/* Divisor */
.divider {
  height: 1px;
  background: var(--color-outline-variant);
  border: none;
  margin: var(--space-4) 0;
}

/* =========================================================
   LAYOUT PRINCIPAL (sidebar + content)
   ========================================================= */
.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--color-background);
}

.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: var(--color-surface);
  border-right: 1px solid var(--color-outline-variant);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  flex-shrink: 0;
  transition: width var(--duration-normal) var(--easing-standard);
}

.main-content {
  flex: 1;
  padding: var(--space-8);
  overflow-x: hidden;
}

.page-header {
  margin-bottom: var(--space-8);
}

.page-title {
  font-size: var(--text-headline-medium);
  font-weight: var(--font-weight-bold);
  color: var(--color-on-surface);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.page-subtitle {
  font-size: var(--text-body-medium);
  color: var(--color-on-surface-variant);
  margin-top: var(--space-1);
}

/* Grid de cards */
.card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.card-grid-3 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(3, 1fr);
}

/* =========================================================
   SCROLLBAR PERSONALIZADA (suave)
   ========================================================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-outline); }