/* ==========================================================================
   Thomas Abelini · versão 4.0 · tokens
   Base: design system "Thomas Abelini" (tema escuro, azul + dourado envelhecido),
   com a textura e o gradiente sutis pedidos pelo PRD.
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Paleta base */
  --ink-950: #0E1218;
  --ink-900: #141A22;
  --ink-850: #1A212B;
  --ink-800: #222A36;
  --ink-700: #2E3846;
  --ink-500: #5B6676;
  --ink-400: #8A94A3;
  --ink-300: #B4BCC7;
  --navy-900: #0B1A33;
  --navy-800: #11264A;
  --blue-700: #173A70;
  --blue-500: #2A64C2;
  --blue-400: #4F84D9;
  --blue-300: #8DB0E8;
  --gold-600: #9C7A36;
  --gold-500: #C9A45C;
  --gold-400: #D8BB7F;
  --gold-300: #E6D3A8;
  --paper: #F4F1EA;

  /* Papéis semânticos */
  --bg: var(--ink-900);
  --bg-deep: var(--ink-950);
  --bg-navy: var(--navy-900);
  --surface: var(--ink-800);
  --surface-2: var(--ink-700);
  --fg-1: var(--paper);
  --fg-2: var(--ink-300);
  --fg-3: var(--ink-400);
  --sky: var(--blue-300);          /* azul claro: detalhe e informação */
  --accent: var(--blue-500);       /* azul de preenchimento */
  --accent-hover: var(--blue-400);
  --highlight: var(--gold-500);    /* dourado: ação e destaque */
  --highlight-hover: var(--gold-400);
  --highlight-fg: var(--ink-950);
  --border: rgba(244, 241, 234, .14);
  --border-strong: rgba(244, 241, 234, .32);
  --watermark: rgba(244, 241, 234, .045);
  --overlay: rgba(14, 18, 24, .72);

  /* Tipografia */
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --fs-display: clamp(2.875rem, 1.4rem + 6.4vw, 7.25rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  --fs-h2: clamp(2.125rem, 1.5rem + 2.6vw, 3.75rem);
  --fs-h3: clamp(1.3125rem, 1.15rem + .7vw, 1.75rem);
  --fs-h4: 1.125rem;
  --fs-quote: clamp(1.875rem, 1.1rem + 3.3vw, 4.25rem);
  --fs-lead: clamp(1.125rem, 1.03rem + .45vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-label: .8125rem;
  --fs-watermark: clamp(10rem, 6rem + 22vw, 26rem);

  --lh-tight: 1.02;
  --lh-heading: 1.12;
  --lh-body: 1.65;
  --ls-display: -.035em;
  --ls-heading: -.02em;
  --ls-label: .14em;
  --measure: 64ch;

  /* Espaço (base 4px) */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(5rem, 2.8rem + 7.5vw, 9rem);
  --container: 77.5rem;
  --gutter: clamp(1rem, .4rem + 3vw, 2.5rem);
  --header-h: 4.5rem;

  /* Forma */
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;
  --bar-w: 5rem;
  --bar-h: 5px;
  --shadow-float: 0 18px 48px rgba(0, 0, 0, .32);

  /* Movimento: assinatura "premium", sem overshoot */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-micro: 180ms;
  --dur-enter: 560ms;
  --dur-slow: 900ms;
  --dur-page: 480ms;

  /* Textura: malha de 60 graus tirada da geometria do ícone */
  --tex-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23F4F1EA' stroke-width='.6'%3E%3Cpath d='M0 .3h56M0 48.5h56M0 0l56 97M56 0L0 97'/%3E%3C/g%3E%3C/svg%3E");
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 64em) {
  :root { --header-h: 5.25rem; }
}