/*
  Tokens do portfólio. Nenhum valor de cor, espaço ou tipo existe fora deste arquivo.

  Espaço: base 4, escala fechada (4 8 12 16 24 32 48 64 96 128).
  Tipo: 6 tamanhos (14 16 20 24 32 48), mais o display fluido do hero.
  Cor: neutros + 1 destaque. Contrastes (WCAG), conferidos por script:
    ink sobre bg 18,86:1 · ink-2 sobre bg 7,73:1 · ink-2 sobre surface 7,03:1
    accent sobre bg 7,15:1 · accent sobre accent-soft 6,34:1
    success só como indicador (não texto) sobre surface 4,48:1, mínimo 3:1
*/
:root {
  /* espaço */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* tipo */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-sm: 0.875rem;   /* 14 */
  --text-md: 1rem;       /* 16 */
  --text-lg: 1.25rem;    /* 20 */
  --text-xl: 1.5rem;     /* 24 */
  --text-2xl: 2rem;      /* 32 */
  --text-3xl: 3rem;      /* 48 */
  --text-display: clamp(2.5rem, 6vw, 4.5rem); /* 40 → 72 */
  --text-code: 0.9em;    /* monoespaçada parece maior: compensa no próprio contexto */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --tracking-tight: -0.02em;
  --tracking-label: 0.04em;
  --underline-offset: 0.2em;

  /* cor */
  --color-bg: #ffffff;
  --color-surface: #f4f4f5;
  --color-ink: #111113;
  --color-ink-2: #52525b;
  --color-line: #e4e4e7;
  --color-accent: #2346d8;
  --color-accent-soft: #eef1fd;
  --color-success: #12805c;

  /* forma */
  --radius-sm: 0.5rem;   /* 8 */
  --radius-md: 1rem;     /* 16 */
  --radius-full: 999px;
  --border: 1px solid var(--color-line);

  /* layout */
  --width-content: 72rem;  /* 1152 */
  --width-text: 40rem;     /* 640, ~70 caracteres */
  --height-preview: 45rem; /* 720, preview ao vivo */
  --gutter: var(--space-4);

  /* movimento */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 200ms;
}

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