/**
 * iMedicina — identidade visual (Design System v2 · Fundamentos · Julho 2026)
 *
 * Fonte canônica: imedicina-playbook/files/identidade-visual/imed-brand.css
 *
 * Tokens ficam em :root (valem em qualquer tela). A classe .imed-brand
 * aplica a superfície da marca (Montserrat, texto e fundo) só no wrapper
 * onde a nova identidade for usada — não no app legado inteiro.
 *
 *   var(--imed-color-primary)
 *   class="imed-brand"
 *   class="imed-brand-btn-gradient"
 */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root,
.imed-brand {
  /* —— 01 Cores —— */
  --imed-color-primary: #2c4695;
  --imed-color-primary-hsl: 225 54% 38%;
  --imed-color-primary-foreground: #ffffff;
  --imed-color-primary-foreground-hsl: 0 0% 100%;
  --imed-color-foreground: #282f3d;
  --imed-color-foreground-hsl: 220 20% 20%;
  --imed-color-muted-foreground: #727b8c;
  --imed-color-muted-foreground-hsl: 220 10% 50%;
  --imed-color-background: #ffffff;
  --imed-color-background-hsl: 0 0% 100%;
  --imed-color-section-light: #f8f9fb;
  --imed-color-section-light-hsl: 220 30% 98%;
  --imed-color-section-alt: #f5f6f9;
  --imed-color-section-alt-hsl: 225 25% 97%;
  --imed-color-border: #e1e4e9;
  --imed-color-border-hsl: 220 15% 90%;
  --imed-color-accent: #75baff;
  --imed-color-accent-hsl: 210 100% 73%;
  --imed-color-destructive: #ee4343;
  --imed-color-destructive-hsl: 0 84% 60%;
  --imed-color-footer: #2d4897;
  --imed-color-primary-soft: #eaf1fb;
  --imed-color-primary-border: #c9dcf5;
  --imed-color-secondary: #525a6b;
  --imed-color-placeholder: #9aa1b0;
  --imed-color-destructive-soft: #fdeded;
  --imed-color-destructive-border: #f7c6c6;
  --imed-color-warning: #b87914;
  --imed-color-warning-soft: #fdf3e3;
  --imed-color-warning-border: #f2dcb3;
  --imed-overlay: rgba(22, 40, 90, 0.45);

  /* —— 02 Tipografia —— */
  --imed-font-family: "Montserrat", system-ui, sans-serif;
  --imed-font-display-size: 36px;
  --imed-font-display-weight: 700;
  --imed-font-h1-size: 32px;
  --imed-font-h1-weight: 700;
  --imed-font-h2-size: 24px;
  --imed-font-h2-weight: 700;
  --imed-font-h3-size: 20px;
  --imed-font-h3-weight: 600;
  --imed-font-h4-size: 16px;
  --imed-font-h4-weight: 600;
  --imed-font-body-size: 15px;
  --imed-font-body-weight: 400;
  --imed-font-small-size: 13px;
  --imed-font-small-weight: 400;
  --imed-font-micro-size: 11px;
  --imed-font-micro-weight: 500;
  --imed-line-height-title: 1.15;
  --imed-line-height-body: 1.5;
  --imed-line-height-micro: 1.3;

  /* —— 03 Espaçamento (múltiplos de 4px) —— */
  --imed-space-1: 4px;
  --imed-space-2: 8px;
  --imed-space-3: 12px;
  --imed-space-4: 16px;
  --imed-space-6: 24px;
  --imed-space-8: 32px;
  --imed-space-12: 48px;
  --imed-space-16: 64px;
  --imed-space-24: 96px;
  --imed-container-max-width: 1300px;
  --imed-container-padding-mobile: 16px;
  --imed-container-padding-desktop: 32px;

  /* —— Breakpoints —— */
  --imed-breakpoint-sm: 640px;
  --imed-breakpoint-md: 768px;
  --imed-breakpoint-lg: 1024px;
  --imed-breakpoint-xl: 1280px;
  --imed-breakpoint-2xl: 1536px;

  /* —— 04 Radius —— */
  --imed-radius-sm: 6px;
  --imed-radius-md: 10px;
  --imed-radius-lg: 15px;
  --imed-radius-xl: 20px;
  --imed-radius-full: 9999px;

  /* —— 04 Sombras —— */
  --imed-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --imed-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --imed-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);
  --imed-shadow-brand: 0 4px 16px rgba(45, 72, 151, 0.3);

  /* —— 05 Gradiente da marca (único, 90°) —— */
  --imed-gradient-brand: linear-gradient(90deg, #16285a 0%, #294996 100%);
  --imed-gradient-brand-hover: linear-gradient(90deg, #1a3068 0%, #2f53a6 100%);
}

.imed-brand {
  font-family: var(--imed-font-family);
  font-size: var(--imed-font-body-size);
  font-weight: var(--imed-font-body-weight);
  line-height: var(--imed-line-height-body);
  color: var(--imed-color-foreground);
  background-color: var(--imed-color-background);
}

.imed-brand-btn-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  border: 0;
  border-radius: var(--imed-radius-lg);
  background: var(--imed-gradient-brand);
  color: var(--imed-color-primary-foreground);
  font-family: var(--imed-font-family);
  font-size: var(--imed-font-h4-size);
  font-weight: var(--imed-font-h4-weight);
  line-height: var(--imed-line-height-title);
  text-decoration: none;
  cursor: pointer;
}

.imed-brand-btn-gradient:hover,
.imed-brand-btn-gradient:focus-visible {
  background: var(--imed-gradient-brand-hover);
  box-shadow: var(--imed-shadow-brand);
}

.imed-brand-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  border: 2px solid var(--imed-color-primary);
  border-radius: var(--imed-radius-lg);
  background: transparent;
  color: var(--imed-color-primary);
  font-family: var(--imed-font-family);
  font-size: var(--imed-font-h4-size);
  font-weight: var(--imed-font-h4-weight);
  line-height: var(--imed-line-height-title);
  text-decoration: none;
  cursor: pointer;
}

.imed-brand-btn-outline:hover,
.imed-brand-btn-outline:focus-visible {
  box-shadow: var(--imed-shadow-sm);
}