/* ============================================================
   build.allen87.com — Design Tokens
   Paleta: charcoal + amber-brass — estratégia, confiança, ambição
   Referência: blogs/build/docs/layout.md
   ============================================================ */

/* ── Fonts ──────────────────────────────────────────────────────────────────── */
:root {
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
}

/* ── Type Scale (8pt grid) ──────────────────────────────────────────────────── */
:root {
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  64px;
}

/* ── Spacing (8pt grid) ─────────────────────────────────────────────────────── */
:root {
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
}

/* ── Layout ─────────────────────────────────────────────────────────────────── */
:root {
  --max-width:       1200px;
  --max-width-prose: 680px;
  --nav-height:      64px;
}

/* ── Border Radius ──────────────────────────────────────────────────────────── */
:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;
}

/* ── Transitions ────────────────────────────────────────────────────────────── */
:root {
  --transition-fast: 200ms ease;
  --transition-base: 350ms ease;
  --transition-slow: 500ms ease;
}

/* ── Z-index ────────────────────────────────────────────────────────────────── */
:root {
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-nav:      200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ── Colors — Light Mode ────────────────────────────────────────────────────── */
/*                                                                               */
/* Paleta editorial fria-neutra — branco limpo, charcoal profundo                */
/* Acento amber-brass: estratégia, confiança, ambição sem agressividade          */
/* Inspiração: Stripe, Linear, Basecamp, First Round Review, Lenny's Newsletter  */
/*                                                                               */
:root,
[data-theme="light"] {
  /* Backgrounds */
  --bg:           #F9F9F7;   /* branco levemente quente */
  --bg-alt:       #F2F1EE;   /* off-white para seções alternadas */
  --bg-card:      #FFFFFF;
  --bg-card-hover:#F6F5F2;
  --bg-nav:       rgba(249, 249, 247, 0.94);
  --bg-code:      #EEECEA;

  /* Text */
  --text:         #1A1917;   /* charcoal profundo */
  --text-muted:   #5C5954;   /* cinza-quente médio */
  --text-dim:     #9B9690;   /* cinza-quente claro */

  /* Acento — amber-brass (estratégia, confiança) */
  --accent:       #A87B38;
  --accent-hover: #8F6828;
  --accent-subtle:rgba(168, 123, 56, 0.08);

  /* CTA — verde profundo (ação, execução) */
  --cta:          #2D5A3D;
  --cta-hover:    #1E4A2E;
  --cta-subtle:   rgba(45, 90, 61, 0.08);

  /* Bordas */
  --border:        rgba(26, 25, 23, 0.08);
  --border-strong: rgba(26, 25, 23, 0.14);
  --border-accent: rgba(168, 123, 56, 0.20);

  /* Sombras */
  --shadow-sm: 0 1px 4px rgba(26, 25, 23, 0.05);
  --shadow-md: 0 4px 16px rgba(26, 25, 23, 0.08);
  --shadow-lg: 0 8px 32px rgba(26, 25, 23, 0.10);

  /* Progress bar */
  --progress-bar: linear-gradient(90deg, #A87B38, #D4A853);
}

/* ── Colors — Dark Mode ─────────────────────────────────────────────────────── */
/*                                                                               */
/* Slate escuro com temperatura levemente fria — profissional, sério, focado     */
/* Amber-brass mais claro para contraste no escuro                               */
/*                                                                               */
[data-theme="dark"] {
  /* Backgrounds */
  --bg:           #141412;   /* slate-charcoal escuro */
  --bg-alt:       #1B1A18;   /* ligeiramente mais claro */
  --bg-card:      #201F1D;
  --bg-card-hover:#272623;
  --bg-nav:       rgba(20, 20, 18, 0.94);
  --bg-code:      #111110;

  /* Text */
  --text:         #E8E4DC;   /* off-white levemente quente */
  --text-muted:   #9B9690;
  --text-dim:     #5C5954;

  /* Acento — amber mais luminoso para contraste */
  --accent:       #D4A853;
  --accent-hover: #E4B863;
  --accent-subtle:rgba(212, 168, 83, 0.10);

  /* CTA — verde médio para contraste */
  --cta:          #5A9A70;
  --cta-hover:    #6AAA80;
  --cta-subtle:   rgba(90, 154, 112, 0.10);

  /* Bordas */
  --border:        rgba(232, 228, 220, 0.08);
  --border-strong: rgba(232, 228, 220, 0.14);
  --border-accent: rgba(212, 168, 83, 0.20);

  /* Sombras */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.40);

  /* Progress bar */
  --progress-bar: linear-gradient(90deg, #D4A853, #A87B38);
}

/* ── Cores de Categoria (tags editoriais — dessaturadas, profissionais) ─────── */
:root {
  --cat-empreendedorismo: #A87B38;  /* amber-brass — ambição, construção */
  --cat-tecnologia:       #4A6FA5;  /* azul-ardósia — inovação, precisão */
  --cat-comportamento:    #4E7A6A;  /* verde-sálvia — consciência, execução */
  --cat-financas:         #2E7D6B;  /* teal profundo — patrimônio, sustentabilidade */
  --cat-produtividade:    #7A5C3A;  /* marrom-quente — disciplina, sistemas */
}