/* tokens.css — paleta dark premium
   Direção: jazz bar noturno · café · teal/cobre/oliva */

:root {
  /* ---- Backgrounds ---- */
  --bg: #0E1219;
  --bg-elev: #161C26;
  --bg-soft: #1A2130;

  /* ---- Texto ---- */
  --ink: #E8E0D4;
  --ink-2: #B0A898;
  --ink-3: #7A7268;

  /* ---- Bordas ---- */
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);

  /* ---- Accent 1 — teal profundo (links, CTA, nav) ---- */
  --accent: #2C9CAA;
  --accent-ink: #E8E0D4;
  --accent-soft: rgba(44, 156, 170, 0.10);

  /* ---- Accent 2 — cobre/laranja quente (destaques, badges) ---- */
  --accent2: #E8943A;
  --accent2-ink: #0E1219;
  --accent2-soft: rgba(232, 148, 58, 0.12);

  /* ---- Accent 3 — oliva (toques sutis) ---- */
  --accent3: #7A8C4A;
  --accent3-soft: rgba(122, 140, 74, 0.12);

  /* ---- Glass ---- */
  --glass-bg: rgba(22, 28, 38, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* ---- Tipografia ---- */
  --font-display: "Sora", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Radius ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* ---- Sombras ---- */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 1px rgba(255, 255, 255, 0.05) inset;
  --shadow-pop:  0 12px 40px -12px rgba(0, 0, 0, 0.55);
  --shadow-glow-accent: 0 0 20px -4px rgba(44, 156, 170, 0.25);
  --shadow-glow-accent2: 0 0 20px -4px rgba(232, 148, 58, 0.25);

  /* ---- Layout ---- */
  --container-max: 1320px;
  --container-pad: 56px;

  /* ---- Artigo — leitura confortável ---- */
  --article-bg: #111722;
  --article-surface: #FBFAF7;
  --article-surface-soft: #F1EDE6;
  --article-line: rgba(24, 28, 36, 0.12);
  --article-ink: #1C2430;
  --article-ink-2: #4D5867;
  --article-ink-3: #7A8491;
  --article-link: #0F7280;
}

/* Cores por plataforma */
.ch-linkedin  { --ch: #0A66C2; }
.ch-instagram { --ch: #C13584; }
.ch-x         { --ch: #E8E0D4; }
.ch-threads   { --ch: #E8E0D4; }
.ch-youtube   { --ch: #FF4444; }
.ch-github    { --ch: #E8E0D4; }
.ch-default   { --ch: #7A7268; }

@media (max-width: 768px) {
  :root { --container-pad: 24px; }
}
