/* ==========================================================================
   tokens.css — Design tokens importados de Design.md
   "Alchemy of Systems" v4.0
   Fonte única de verdade para cor, tipografia, espaçamento e raio.
   Nenhuma decisão de design é definida fora deste arquivo.
   ========================================================================== */

:root {
  /* --- Colors (Design.md › colors) ------------------------------------- */
  --color-paper:  #FDFCF8;
  --color-ink:    #1C1917;
  --color-sepia:  #78350F;
  --color-stone:  #E7E5E4;
  --color-rust:   #9A3412;
  --color-vellum: rgba(253, 252, 248, 0.85);
  --color-grid:   rgba(28, 25, 23, 0.03);

  /* Aliases semânticos derivados (mapeiam os papéis usados no layout) */
  --color-surface:      var(--color-paper);
  --color-surface-alt:  #F4F2EC;            /* paper levemente aprofundado */
  --color-inverse:      var(--color-ink);
  --color-on-inverse:   var(--color-paper);
  --color-border:       rgba(28, 25, 23, 0.14);
  --color-border-soft:  rgba(28, 25, 23, 0.08);
  --color-ink-60:       rgba(28, 25, 23, 0.70);
  --color-ink-45:       rgba(28, 25, 23, 0.60);
  --color-paper-70:     rgba(253, 252, 248, 0.70);
  --color-paper-45:     rgba(253, 252, 248, 0.58);
  --color-accent:       var(--color-rust);
  --color-accent-deep:  var(--color-sepia);
  --color-accent-light: #D9824F;   /* tom claro do rust — usado sobre fundos escuros para manter contraste */

  /* --- Typography (Design.md › typography) ----------------------------- */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  /* Weights permitidos por Design.md */
  --weight-serif-light:    300;
  --weight-serif-regular:  400;
  --weight-serif-medium:   500;
  --weight-serif-semibold: 600;
  --weight-sans-xlight:    200;
  --weight-sans-light:     300;
  --weight-sans-regular:   400;
  --weight-mono-xlight:    200;
  --weight-mono-light:     300;
  --weight-mono-regular:   400;

  /* Escala tipográfica fluida (clamp: mobile → desktop) */
  --type-display-xl: clamp(3rem, 8vw + 0.5rem, 7.5rem);
  --type-display-lg: clamp(2.5rem, 5.5vw + 0.5rem, 5rem);
  --type-display-md: clamp(2rem, 3.5vw + 0.5rem, 3.25rem);
  --type-display-sm: clamp(1.6rem, 2vw + 0.5rem, 2.25rem);
  --type-body-lg:    clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
  --type-body:       1rem;
  --type-body-sm:    0.9375rem;
  --type-label:      0.75rem;   /* mono eyebrow / metadata */
  --type-label-sm:   0.6875rem;

  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-mono:   0.22em;   /* mono labels — tracking amplo */
  --tracking-mono-sm:0.14em;
  --tracking-tight:  -0.01em;

  /* --- Spacing (Design.md › spacing) ----------------------------------- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  48px;
  --space-xxl: 64px;
  /* Gutters de seção (rítmico, gutters largos 48px+) */
  --space-section: clamp(4rem, 9vw, 9rem);
  --space-gutter:  clamp(1.25rem, 5vw, 4rem);

  /* --- Radii (Design.md › rounded) ------------------------------------- */
  --radius-sharp:   0px;
  --radius-sm:      2px;
  --radius-button:  999px;
  --radius-control: 4px;

  /* --- Layout & depth -------------------------------------------------- */
  --maxw-content: 1280px;
  --maxw-narrow:  680px;   /* coluna central estreita (Statement) */
  --maxw-prose:   62ch;

  --z-grid:    0;
  --z-canvas:  1;
  --z-content: 20;
  --z-nav:     50;
  --z-overlay: 100;
  --z-preloader: 1000;

  --border-hairline: 1px solid var(--color-border);
  --border-soft:     1px solid var(--color-border-soft);
  --vellum-blur:     blur(12px);

  /* --- Motion (Design.md › motion) ------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-entrance: 1.2s;   /* fade-in 1.2s ease-out forwards */
  --dur-base:     0.4s;
  --dur-fast:     0.25s;

  /* --- Breakpoints (referência; usados em media queries) --------------- */
  --bp-sm: 640px;
  --bp-md: 860px;
  --bp-lg: 1080px;
}