/*
 * Design Tokens — 14º Simpósio ACOCCV
 * Direção estética: "Autoridade Clínica Editorial"
 * Seriedade e confiança de um evento médico de alto nível tratadas com
 * sofisticação editorial premium — nem hospital genérico, nem SaaS.
 * Contraste tipográfico forte (display condensado/bold x humanista limpo),
 * vermelho de marca como cor de ação sobre base neutra dominante,
 * azul de marca como cor de autoridade institucional.
 * Vermelho e azul NUNCA competem em peso igual na mesma composição.
 *
 * Camadas: Primitivo → Semântico → (Componente fica para sessão futura)
 * Este arquivo define apenas Primitivo + Semântico.
 */

:root {

  /* ===== Cores — Primitivos ===== */

  /* Vermelho de marca (ação) */
  --color-red-600: #cc3438;
  --color-red-700: color-mix(in srgb, var(--color-red-600) 85%, black);
  --color-red-100: color-mix(in srgb, var(--color-red-600) 12%, white);

  /* Azul de marca (autoridade institucional) */
  --color-blue-900: #013080;
  --color-blue-950: color-mix(in srgb, var(--color-blue-900) 85%, black);
  --color-blue-100: color-mix(in srgb, var(--color-blue-900) 10%, white);

  /* Neutros */
  --color-white: #ffffff;
  --color-near-black: #0a0a0a;
  --color-gray-50: #f2f3f5;
  --color-gray-200: #e2e4e8;
  --color-gray-500: #6b7280;

  /* Estados de formulário (preparação conservadora, sem uso confirmado ainda) */
  --color-green-600: #1f8a4c;
  --color-amber-600: #b7791f;

  /* ===== Cores — Semântico ===== */

  --color-primary: var(--color-red-600);
  --color-primary-hover: var(--color-red-700);
  --color-primary-subtle: var(--color-red-100);

  --color-secondary: var(--color-blue-900);
  --color-secondary-hover: var(--color-blue-950);
  --color-secondary-subtle: var(--color-blue-100);

  --color-background: var(--color-white);
  --color-background-alt: var(--color-gray-50);

  --color-foreground: var(--color-near-black);
  --color-foreground-muted: var(--color-gray-500);

  --color-border: var(--color-gray-200);

  --color-success: var(--color-green-600);
  --color-warning: var(--color-amber-600);

  /* ===== Tipografia ===== */

  /* Pilhas de fonte — ver docs/arquitetura.md D2 (fallback via Google Fonts,
     cliente sem licença para Impact/Humanst) */
  --font-display: "Anton", "Archivo Black", "Arial Narrow Bold", sans-serif;
  --font-body: "Public Sans", "PT Sans", "Segoe UI", sans-serif;

  /* Pesos */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Altura de linha */
  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Escala de tamanho — progressão modular ~1.25, headings em clamp()
     para evitar múltiplas media queries futuras */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --text-2xl: clamp(1.875rem, 1.5rem + 1.4vw, 2.25rem);
  --text-3xl: clamp(2.25rem, 1.8rem + 1.8vw, 2.75rem);
  --text-4xl: clamp(2.75rem, 2.1rem + 2.6vw, 3.5rem);
  --text-5xl: clamp(3.25rem, 2.4rem + 3.6vw, 4.5rem);
  --text-6xl: clamp(3.75rem, 2.6rem + 4.8vw, 5.5rem);

  /* ===== Espaçamento ===== */

  --space-3xs: 0.25rem;  /* 4px */
  --space-2xs: 0.5rem;   /* 8px */
  --space-xs: 0.75rem;   /* 12px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */
  --space-4xl: 8rem;     /* 128px */

  /*
   * DECISÃO OBRIGATÓRIA — Autoridade única de espaçamento vertical:
   * O espaçamento entre eyebrow/título/descrição (SectionHeading.tsx) e
   * entre elementos empilhados em cards vem SEMPRE do `gap` do container
   * flex/grid. Os elementos filhos NUNCA recebem margin-top/margin-bottom
   * próprios para esse fim. `--space-heading-gap` é o token dedicado e
   * nomeado para essa autoridade — não usar `--space-md` genérico ali,
   * para deixar a intenção explícita no componente.
   */
  --space-heading-gap: var(--space-md);

  /* ===== Breakpoints & Container =====
   * SectionContainer.tsx é a ÚNICA fonte de verdade que consome os
   * tokens de largura abaixo. Nenhum componente de seção deve declarar
   * `max-width` própria — sempre delegar a SectionContainer.
   * Custom properties não são lidas dentro de media queries em todos os
   * contextos; os tokens de breakpoint abaixo servem como referência de
   * consulta manual ao escrever as media queries no CSS de componentes.
   */

  --container-desktop: 1280px;
  --container-notebook: 1180px;
  --container-tablet: 680px;
  --container-mobile: 360px;

  --breakpoint-desktop: 1280px;
  --breakpoint-notebook: 1024px;
  --breakpoint-tablet: 768px;
  --breakpoint-mobile: 480px;

  --container-padding-inline: var(--space-sm);

  /* ===== Radius, Sombra, Transição, Z-index ===== */

  /* Raios — tom editorial premium: nem reto/frio, nem infantilizado */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Sombras — para cards com hover elevado */
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.10);
  --shadow-lg: 0 16px 32px rgba(10, 10, 10, 0.14);

  /* Transições — hover states e scroll-reveal */
  --transition-fast: 150ms ease-out;
  --transition-base: 250ms ease-out;
  --transition-slow: 400ms ease-out;

  /* Z-index — header fixo e botão flutuante */
  --z-header: 100;
  --z-whatsapp-button: 90;
  --z-modal: 200;
}