/*
  TOKENS — Site Ilha Sites
  Valores vindos de Documentos Empresa\design.md (item 1.2 e 3.1),
  aprovado pela Direção em 04/09/2026. Não alterar sem passar pelo
  Setor 04 de novo.
*/

:root {
  /* --- Cor --- */
  --color-bg: #0A0E14;
  --color-surface: #141922;
  --color-surface-2: #1B222E;

  --color-text: #F5F7FA;
  --color-text-muted: #A9B4C2;

  --color-accent: #22D3EE;      /* ciano */
  --color-accent-2: #A78BFA;    /* violeta claro */
  --color-cta-label: #0A0E14;   /* rótulo escuro obrigatório em botão de acento */

  --color-silver: #C7CED9;
  --color-silver-grad: linear-gradient(180deg, #EEF2F7, #C7CED9 55%, #9AA6B6);

  --color-border: #232A36;         /* decorativo */
  --color-border-strong: #5A6577;  /* campo de formulário / cartão em destaque */

  --color-danger: #F87171;
  --color-success: #4ADE80;

  --gradient-accent: linear-gradient(120deg, rgba(34, 211, 238, 0.16), rgba(167, 139, 250, 0.16));

  /* --- Tipografia --- */
  --font-heading: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --line-height-heading: 1.2;
  --line-height-body: 1.6;

  /* Escala fluida — design.md 3.5 */
  --fs-h1: clamp(2rem, 1.3rem + 3vw, 3.5rem);
  --fs-h2: clamp(1.625rem, 1.35rem + 1.2vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-kicker: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);

  /* --- Espaçamento — design.md 3.1 --- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */
  --space-10: 8rem;    /* 128px */

  /* --- Layout — design.md 3.3 --- */
  --container: 1120px;
  --measure: 720px;
  --gutter: var(--space-4);

  /* --- Forma --- */
  --radius-card: 16px;
  --radius-pill: 999px;
}

@media (min-width: 768px) {
  :root { --gutter: var(--space-5); }
}

@media (min-width: 1024px) {
  :root { --gutter: var(--space-6); }
}