/* ==========================================================================
   AI Hub Brasil — Design Tokens
   Direção: Editorial Clássico
   Referências: Stratechery, The New Stack, NYT Tech
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     COLOR · paleta editorial neutra + accent vermelho-jornal
     -------------------------------------------------------------------------- */

  /* Surface · papel */
  --color-paper:        #fafaf7;   /* fundo principal · off-white quente */
  --color-paper-2:      #f4f2ec;   /* surface alternativa · seções */
  --color-surface:      #ffffff;   /* cards, sidebar, surface elevada */

  /* Tinta · texto */
  --color-ink:          #1a1a1a;   /* tinta principal · não preto puro */
  --color-ink-2:        #3a3a3a;   /* secundário · subtítulos */
  --color-ink-3:        #5a5a5a;   /* body alternativo · meta */
  --color-muted:        #8a8a8a;   /* labels, datas, autores */
  --color-muted-2:      #b5b3ad;   /* divisores fortes, pull-quotes */

  /* Borders */
  --color-border:       #e5e3dc;   /* divisor padrão */
  --color-border-soft:  #efedeb;   /* divisor sutil */
  --color-border-strong:#c9c6bc;   /* divisor forte (pull-quote, hr) */

  /* Accent · vermelho-jornal clássico */
  --color-accent:       #a82c2c;   /* tinta de jornal */
  --color-accent-hover: #862020;
  --color-accent-soft:  #f4dada;   /* fundo de tag/destaque */

  /* Sintáticos */
  --color-link:         var(--color-accent);
  --color-link-hover:   var(--color-accent-hover);
  --color-text:         var(--color-ink);
  --color-text-muted:   var(--color-ink-3);
  --color-bg:           var(--color-paper);

  /* Estados (uso pontual) */
  --color-success:      #2f6f3e;
  --color-warning:      #b87a1f;
  --color-danger:       #b03030;

  /* Code surface */
  --color-code-bg:      #1a1a1a;
  --color-code-fg:      #f4f2ec;
  --color-code-inline-bg: #efedeb;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------------------------- */

  /* Famílias */
  --font-serif:  "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:   "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Escala modular · ratio 1.250 (major third) */
  --text-xs:    0.75rem;     /* 12px · captions, labels */
  --text-sm:    0.875rem;    /* 14px · meta, small */
  --text-base:  1rem;        /* 16px · UI base */
  --text-md:    1.125rem;    /* 18px · body editorial */
  --text-lg:    1.25rem;     /* 20px · lead, h4 */
  --text-xl:    1.5rem;      /* 24px · h3 */
  --text-2xl:   1.875rem;    /* 30px · h2 */
  --text-3xl:   2.375rem;    /* 38px · h1 */
  --text-4xl:   3rem;        /* 48px · hero h1 */
  --text-5xl:   3.75rem;     /* 60px · display */

  /* Pesos */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-tight:   1.15;   /* headlines */
  --leading-snug:    1.30;   /* h3/h4 */
  --leading-normal:  1.55;   /* body UI */
  --leading-reading: 1.70;   /* corpo de artigo · longa leitura */
  --leading-loose:   1.85;   /* citações longas */

  /* Letter spacing */
  --tracking-tight:  -0.02em;  /* headlines grandes */
  --tracking-snug:   -0.01em;  /* headlines médias */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* labels, eyebrow */
  --tracking-wider:  0.10em;   /* uppercase eyebrow */

  /* --------------------------------------------------------------------------
     SPACING · escala 4px
     -------------------------------------------------------------------------- */
  --space-0:   0;
  --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 */

  /* --------------------------------------------------------------------------
     LAYOUT · grid + containers editoriais
     -------------------------------------------------------------------------- */
  --container-max:     1200px;   /* limite global */
  --container-wide:    1080px;   /* home, listings */
  --container-content: 800px;    /* artigo (com sidebar) */
  --reading-width:     680px;    /* corpo de artigo · ~70ch */
  --sidebar-width:     280px;
  --gutter:            var(--space-5);   /* 24px entre colunas */

  /* Breakpoints (referência · usados em @media) */
  --bp-sm:   480px;
  --bp-md:   768px;
  --bp-lg:   1024px;
  --bp-xl:   1280px;

  /* --------------------------------------------------------------------------
     RADIUS · editorial = quase nada
     -------------------------------------------------------------------------- */
  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-pill:  999px;

  /* --------------------------------------------------------------------------
     SHADOW · editorial é flat, sombras mínimas
     -------------------------------------------------------------------------- */
  --shadow-none:  none;
  --shadow-xs:    0 1px 2px rgba(20, 20, 20, 0.04);
  --shadow-sm:    0 2px 4px rgba(20, 20, 20, 0.06);
  --shadow-md:    0 6px 16px rgba(20, 20, 20, 0.08);

  /* --------------------------------------------------------------------------
     MOTION
     -------------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* --------------------------------------------------------------------------
     Z-INDEX
     -------------------------------------------------------------------------- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    100;
  --z-overlay:   500;
  --z-modal:     1000;
  --z-toast:     2000;
}