/* Valariss — tokens de design.
   Fonte de verdade: specs/design.md. Não introduzir valor fora desta lista. */

:root {
  /* ---- Superfícies e texto (§2.1, §2.2) ---- */
  --bg:          #0b132b;   /* navy do manual de marca */
  --surface:     #0f1936;
  --surface-2:   #152242;
  --surface-3:   #1c2b52;
  --border:      #233156;
  --border-soft: #182241;

  --text:        #f1f5f9;   /* 16,8:1 sobre --bg */
  --text-muted:  #94a3b8;   /*  7,2:1 sobre --bg */
  --text-faint:  #64748b;   /*  3,9:1 — SÓ texto grande (§2.6) */

  /* ---- Azul e ciano: dois papéis, não intercambiáveis (§2.3) ---- */
  --brand:       #2563eb;   /* PREENCHE. 3,6:1 como texto → nunca em texto pequeno */
  --brand-deep:  #1d4ed8;
  --accent:      #22d3ee;   /* ESCREVE. Ciano da plataforma — 10,2:1 sobre --bg */
  --accent-soft: #67e8f9;

  --accent-wash: rgba(34, 211, 238, 0.12);
  --accent-line: rgba(34, 211, 238, 0.35);
  --brand-wash:  rgba(37, 99, 235, 0.14);

  /* ---- Degradês (§2.4) ---- */
  --gradient-btn:   linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --gradient-brand: linear-gradient(135deg, #22d3ee 0%, #2563eb 100%);
  --gradient-hair:  linear-gradient(90deg, #22d3ee 0%, rgba(34, 211, 238, 0) 100%);

  /* ---- Estado: só dentro de peças de produto (§2.5) ---- */
  --good:   #34d399;
  --warn:   #fbbf24;
  --danger: #f87171;
  --good-wash:   rgba(52, 211, 153, 0.12);
  --warn-wash:   rgba(251, 191, 36, 0.12);
  --danger-wash: rgba(248, 113, 113, 0.12);
  /* Mesma alfa de --accent-line (0.35): brilho de ponto animado no
     diagrama do Hub, onde o ponto herda a cor de estado (§9b, D66). */
  --good-line:   rgba(52, 211, 153, 0.35);
  --warn-line:   rgba(251, 191, 36, 0.35);
  --danger-line: rgba(248, 113, 113, 0.35);

  /* ---- Tipografia (§3) ---- */
  --font: 'Google Sans Flex', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-display-1: clamp(2.75rem, 1.8rem + 4.2vw, 4.75rem);
  --fs-display-2: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  --fs-h2:        clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
  --fs-h3:        clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --fs-h4:        1.125rem;
  --fs-lead:      clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --fs-body:      1.0625rem;
  --fs-body-sm:   0.9375rem;
  --fs-caption:   0.8125rem;
  --fs-eyebrow:   0.75rem;
  --fs-stat:      clamp(2.5rem, 1.8rem + 3.2vw, 4.25rem);

  /* ---- Espaçamento (§4.1) ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-32: 128px; --s-40: 160px;

  /* ---- Estrutura (§4.2) ---- */
  --container:        1200px;
  --container-narrow: 800px;
  --gutter:           clamp(1.25rem, 5vw, 2.5rem);
  --section-y:        clamp(5rem, 3rem + 7vw, 9rem);
  --section-y-sm:     clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --header-h:         60px;

  /* ---- Raios (§5) ---- */
  --r-xs: 6px;  --r-sm: 8px;   --r-md: 10px;  --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

  /* ---- Sombras (§5) ---- */
  --shadow-card: 0 20px 50px -25px rgba(2, 6, 20, 0.60);
  --shadow-lift: 0 28px 60px -30px rgba(2, 6, 20, 0.85);
  --shadow-btn:  0 14px 28px -12px rgba(37, 99, 235, 0.40);

  /* ---- Movimento (§10.1) ---- */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.4, 0, .2, 1);
  --t-micro: 150ms;
  --t-ui:    250ms;
  --t-enter: 500ms;
}

@media (min-width: 1024px) {
  :root { --header-h: 76px; }
}

/* §12 — no mobile, corpo de texto nunca abaixo de 16px. */
@media (max-width: 767px) {
  :root { --fs-body-sm: 1rem; }
}