/* ============================================================
   mind.allen87.com — Design Tokens
   Identidade própria — editorial calmo, independente da Allen87
   Referência: blogs/mind/docs/layout.md
   ============================================================ */

/* ── Fonts ──────────────────────────────────────────────────────────────────── */
/* DM Serif Display: elegante, longa tradição editorial, peso único (400)        */
/* Inter: legibilidade máxima em tela, o padrão editorial digital moderno        */
: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 (suaves — calm technology) ─────────────────────────────────── */
: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 (padrão) ───────────────────────────────────────────── */
/*                                                                               */
/* Paleta editorial quente — off-white, charcoal, azul-cinza suave              */
/* Sem Navy Allen87, sem Orange Allen87                                          */
/* Inspiração: Farnam Street, Ness Labs, Stripe Press, Every.to                  */
/*                                                                               */
:root,
[data-theme="light"] {
  /* Backgrounds — tons quentes suaves */
  --bg:           #FAF9F6;   /* off-white levemente quente */
  --bg-alt:       #F2F0EB;   /* bege suave para seções alternadas */
  --bg-card:      #FFFFFF;
  --bg-card-hover:#F7F6F2;
  --bg-nav:       rgba(250, 249, 246, 0.94);
  --bg-code:      #EFEDE7;

  /* Text — charcoal quente (não azul, não preto absoluto) */
  --text:         #1E1D1A;   /* charcoal quente — máxima legibilidade */
  --text-muted:   #6B6460;   /* cinza-quente médio */
  --text-dim:     #A09890;   /* cinza-quente claro */

  /* Acento — azul-cinza suave (intelectual, calmo, sem frieza corporativa) */
  --accent:       #4A7A9B;
  --accent-hover: #3A6A8B;
  --accent-subtle:rgba(74, 122, 155, 0.08);

  /* CTA — verde dessaturado (calmo, não agressivo) */
  --cta:          #4E7A6A;
  --cta-hover:    #3E6A5A;
  --cta-subtle:   rgba(78, 122, 106, 0.08);

  /* Bordas — quase invisíveis, só estruturais */
  --border:        rgba(30, 29, 26, 0.08);
  --border-strong: rgba(30, 29, 26, 0.14);
  --border-accent: rgba(74, 122, 155, 0.16);

  /* Sombras — mínimas, quentes */
  --shadow-sm: 0 1px 4px rgba(30, 29, 26, 0.05);
  --shadow-md: 0 4px 16px rgba(30, 29, 26, 0.07);
  --shadow-lg: 0 8px 32px rgba(30, 29, 26, 0.09);

  /* Progress bar */
  --progress-bar: linear-gradient(90deg, #4A7A9B, #7AABCA);
}

/* ── Colors — Dark Mode ─────────────────────────────────────────────────────── */
/*                                                                               */
/* Escuro quente — sem preto absoluto, sem Navy, sem neon                        */
/* Tom grafite com temperatura quente — conforto visual, contraste equilibrado   */
/*                                                                               */
[data-theme="dark"] {
  /* Backgrounds — grafite quente */
  --bg:           #181714;   /* grafite quente escuro */
  --bg-alt:       #1E1D1A;   /* ligeiramente mais claro */
  --bg-card:      #232220;
  --bg-card-hover:#292724;
  --bg-nav:       rgba(24, 23, 20, 0.94);
  --bg-code:      #141310;

  /* Text — off-white quente */
  --text:         #E8E4DC;   /* branco-quente — sem frieza de #FFFFFF */
  --text-muted:   #A09890;
  --text-dim:     #6B6460;

  /* Acento — azul-cinza mais claro para contraste no escuro */
  --accent:       #7AABCA;
  --accent-hover: #8ABBDA;
  --accent-subtle:rgba(122, 171, 202, 0.10);

  /* CTA — verde dessaturado claro */
  --cta:          #7AAE9A;
  --cta-hover:    #8ABEAD;
  --cta-subtle:   rgba(122, 174, 154, 0.10);

  /* Bordas */
  --border:        rgba(232, 228, 220, 0.08);
  --border-strong: rgba(232, 228, 220, 0.14);
  --border-accent: rgba(122, 171, 202, 0.18);

  /* Sombras */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);

  /* Progress bar */
  --progress-bar: linear-gradient(90deg, #7AABCA, #4A7A9B);
}

/* ── Cores de Série (tags editoriais — dessaturadas, calmas) ────────────────── */
:root {
  --series-cognicao:  #4A7A9B;  /* azul-cinza — Cognição Digital */
  --series-ia:        #7A6A9B;  /* roxo-cinza — IA & Mente */
  --series-sistemas:  #4E7A6A;  /* verde dessaturado — Sistemas Mentais */
  --series-trabalho:  #6A8A9B;  /* azul-acinzentado — Trabalho Digital */
  --series-emocional: #9B7A5C;  /* terracota suave — Vida Emocional */
}