/*
  Medic Raptor — Design Tokens
  Fonte única de verdade para cor, espaçamento, tipografia, sombra,
  z-index, transição e breakpoint. Nenhum valor "mágico" deve ser
  usado diretamente nos demais arquivos CSS — sempre via var(--token).

  ATUALIZAÇÃO DE MARCA: paleta e tipografia abaixo seguem o brandbook
  oficial aprovado (mark "R" angular + oliva, ver
  docs/architecture/DESIGN-SYSTEM.md). Substitui a paleta exploratória
  anterior (preto/grafite/teal/verde/vermelho/âmbar).

  Ajustes documentados nesta atualização:
  - --raptor-steel e o terceiro nível de superfície (--surface-overlay)
    não vêm do brandbook (que define só preto/grafite/oliva/prata) — são
    INTERPOLADOS a partir da mesma família de cor para dar uma escala de
    cinza utilizável na UI. Ver nota na seção correspondente.
  - A marca não define vermelho/âmbar de erro/aviso. Foram propostos tons
    neutros harmonizados (--color-danger-*, --color-warning-*), usados
    SOMENTE em estados funcionais, nunca como cor de marca.
*/

:root {
  /* ---------- Brand palette (fonte: brandbook oficial) ---------- */
  --raptor-black: #0D1117;
  --raptor-graphite: #2A2F36;
  /* Interpolado entre black e graphite — 3º nível de superfície, não está no brandbook. */
  --raptor-graphite-deep: #1B1F26;

  --raptor-olive: #A3AA74;
  --raptor-silver: #E6E6E6;
  --raptor-paper: #FFFFFF;

  /* Interpolado na mesma família neutra do grafite, para texto secundário
     legível — o brandbook não define um cinza intermediário dedicado. */
  --raptor-steel: #A9AEB5;

  /* ---------- Semantic / accessible variants (funcionais, não-marca) ---------- */
  /* Vermelho neutro para texto de erro sobre fundo escuro (~5.4:1). */
  --color-danger-text: #C97158;
  /* Vermelho escurecido para superfícies preenchidas com texto claro (~5.6:1). */
  --color-danger-surface: #8C4530;
  /* Ocre para texto de aviso sobre fundo escuro (~7.7:1). */
  --color-warning-text: #C2A24C;

  /* ---------- Superfícies ---------- */
  --surface-base: var(--raptor-black);
  --surface-raised: var(--raptor-graphite);
  --surface-overlay: var(--raptor-graphite-deep);

  /* ---------- Texto ---------- */
  --text-primary: var(--raptor-silver);
  --text-secondary: var(--raptor-steel);
  --text-inverse: var(--raptor-black);
  --text-accent: var(--raptor-olive);
  --text-warning: var(--color-warning-text);
  --text-danger: var(--color-danger-text);

  /* ---------- Interação ---------- */
  /* Regra: acento "cheio" como FUNDO de botão sempre com texto escuro
     (--text-inverse); acento como TEXTO/borda/ícone sobre fundo escuro
     usa a cor cheia diretamente. */
  --accent-primary: var(--raptor-olive);
  --danger-surface: var(--color-danger-surface);

  --border-subtle: rgba(230, 230, 230, 0.12);
  --border-default: rgba(230, 230, 230, 0.2);
  --border-strong: rgba(230, 230, 230, 0.32);
  --border-accent: var(--raptor-olive);

  /* ---------- Tipografia (brandbook: Orbitron display + Inter corpo) ---------- */
  --font-display: 'Orbitron', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;

  --fs-100: 0.75rem;   /* 12px — legendas */
  --fs-200: 0.875rem;  /* 14px — corpo pequeno */
  --fs-300: 1rem;      /* 16px — corpo padrão */
  --fs-400: 1.125rem;  /* 18px — corpo destacado */
  --fs-500: 1.375rem;  /* 22px — subtítulo */
  --fs-600: 1.75rem;   /* 28px — título de seção (mobile) */
  --fs-700: 2.25rem;   /* 36px — título de seção (desktop) */
  --fs-800: 3rem;      /* 48px — hero (mobile) */
  --fs-900: 4.5rem;    /* 72px — hero (desktop) */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-tight: -0.01em;
  --ls-wide: 0.06em;
  --ls-wider: 0.12em;

  /* ---------- Espaçamento (escala 4px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---------- Raio de borda ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------- Sombra ---------- */
  /* Só sombra de profundidade (contato/elevação) — sem glow/halo em nenhum
     componente: feedback de marca é aresta dura, não brilho difuso. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);

  /* ---------- Transição ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;

  /* ---------- Z-index ---------- */
  --z-base: 0;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ---------- Layout ---------- */
  --content-max-width: 1280px;
  --content-padding-inline: var(--space-4);

  /* ---------- Alvo mínimo de toque (acessibilidade mobile) ---------- */
  --tap-target-min: 44px;
}

/* ---------- Breakpoints de referência (usados como comentário —
   CSS não suporta var() em media query; ver layout.css) ----------
   --bp-sm: 480px;
   --bp-md: 768px;
   --bp-lg: 1024px;
   --bp-xl: 1440px;
*/

@media (min-width: 768px) {
  :root {
    --content-padding-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --content-padding-inline: var(--space-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}