/* =====================================================================
   tokens.css - Design tokens (cores, tipografia, espacamento, motion)
   Base extraida do visual de referencia. Ajuste aqui para re-tematizar
   o site inteiro de uma vez so.
   ===================================================================== */

:root {
  /* ---- Fontes ---- */
  --font-display: "Cormorant Garamond", "Gelica", "Times New Roman", serif;
  --font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Helvetica Neue", system-ui, Roboto, "Noto Sans", sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  --font-hand: "Caveat", "Segoe Script", "Brush Script MT", cursive;

  /* ---- Escala tipografica ---- */
  --text-small: 0.8125rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-body: 1.55;
  --leading-relaxed: 1.625;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* ---- Paleta neutra (papel quente) ---- */
  --color-bg: #f3f1eb;
  --color-bg-light: #eae6db;
  --color-bg-neutral: #eee8d8;
  --color-bg-neutral-2: #dbd4bf;
  --color-bg-white: #fff;
  --color-fg-neutral: #8a8576;

  /* ---- Tinta (texto) ---- */
  --color-ink: #242424;
  --color-ink-dim: #666;
  --color-ink-mute: #a2a2a2;
  --color-ink-inverted: #fff;

  /* ---- Acentos tematicos ---- */
  --color-pink: #bf5a7a;
  --color-pink-1: #eabaca;
  --color-teal: #168b9d;
  --color-teal-1: #65b6c3;
  --color-orange: #cb7836;
  --color-orange-1: #eebc94;
  --color-green: #1a7b3f;
  --color-green-1: #7db592;
  --color-violet: #6c4ad6;
  --color-violet-1: #b3a0ee;

  /* ---- Cosmos (paineis escuros, ex.: latest log) ---- */
  --color-starlight: #d8dde8;
  --color-cosmos: #0a0d16;
  --color-cosmos-1: #1b1f30;
  --color-cosmos-2: #05060d;

  /* ---- Raios / formas ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-card: 20px;
  --radius-pill: 9999px;

  /* ---- Espacamento base ---- */
  --space: 0.25rem;
  --gutter: 1.25rem;
  --sidebar-w: 303px;
  --content-max: 720px;

  /* ---- Sombras ---- */
  --shadow-card: 0 1px 2px rgba(36, 36, 36, 0.04),
    0 12px 32px -16px rgba(36, 36, 36, 0.22);
  --shadow-pop: 0 18px 48px -20px rgba(36, 36, 36, 0.4);

  /* ---- Motion ---- */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 0.16s;
  --duration-base: 0.24s;
  --duration-slow: 0.48s;

  /* Footer */
  --theme-tint: var(--color-pink);
  --footer-text: rgba(255, 250, 247, 0.96);
  --footer-text-soft: rgba(255, 241, 236, 0.9);
  --footer-art: rgba(255, 219, 230, 0.44);
  --footer-shadow: rgba(109, 31, 58, 0.14);
}

[data-footer-color="pink"] {
  --theme-tint: #ffe8ef;
  --footer-text: rgba(255, 250, 247, 0.96);
  --footer-text-soft: rgba(255, 238, 242, 0.92);
  --footer-art: rgba(255, 214, 226, 0.42);
  --footer-shadow: rgba(109, 31, 58, 0.14);
}

[data-footer-color="teal"] {
  --theme-tint: #def7f8;
  --footer-text: rgba(246, 254, 255, 0.97);
  --footer-text-soft: rgba(223, 249, 251, 0.92);
  --footer-art: rgba(189, 235, 238, 0.34);
  --footer-shadow: rgba(10, 69, 77, 0.16);
}

[data-footer-color="orange"] {
  --theme-tint: #fff0de;
  --footer-text: rgba(255, 250, 244, 0.97);
  --footer-text-soft: rgba(255, 240, 220, 0.92);
  --footer-art: rgba(252, 221, 186, 0.35);
  --footer-shadow: rgba(104, 54, 17, 0.15);
}

[data-footer-color="green"] {
  --theme-tint: #ebf9f0;
  --footer-text: rgba(249, 255, 250, 0.97);
  --footer-text-soft: rgba(226, 246, 232, 0.9);
  --footer-art: rgba(168, 220, 184, 0.34);
  --footer-shadow: rgba(12, 66, 32, 0.16);
}

[data-footer-color="violet"] {
  --theme-tint: #f0e9ff;
  --footer-text: rgba(250, 248, 255, 0.97);
  --footer-text-soft: rgba(234, 225, 255, 0.92);
  --footer-art: rgba(203, 190, 244, 0.35);
  --footer-shadow: rgba(54, 31, 110, 0.16);
}