/* ============================================================================
   CEFI — Link da Bio · Design Tokens (3 camadas: primitivo → semântico → componente)
   Marca CEFI: DM Serif Display + DM Sans · azul #303F53 · ciano #50A7B7 · radius 16px
   Direção: "editorial sereno e acolhedor".
   ============================================================================ */

:root {
  /* ---------- 1. PRIMITIVOS ---------- */
  --c-ink-900: #1a2330;   /* texto principal */
  --c-ink-700: #303F53;   /* azul escuro CEFI (primária) */
  --c-ink-500: #5a6e7f;   /* texto muted */
  --c-cyan-600: #3d8fa0;  /* ciano hover */
  --c-cyan-500: #50A7B7;  /* ciano (primária clara) */
  --c-cyan-100: #d6eff3;  /* ciano claro (fundo) */
  --c-sand-100: #f4f6f8;  /* areia */
  --c-cream-50: #fbfaf6;  /* creme quente (fundo da página) */
  --c-paper:    #ffffff;
  --c-line:     #e7e3da;  /* linhas/divisores quentes */
  --c-gold:     #c9a24a;  /* acento editorial pontual */

  /* dark */
  --c-d-bg:      #131b24;
  --c-d-surface: #1b2632;
  --c-d-surface2:#22303d;
  --c-d-line:    #2c3b49;
  --c-d-text:    #eaf1f4;
  --c-d-muted:   #9fb3c0;

  /* ---------- tipografia ---------- */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.9rem + 0.25vw, 1.02rem);
  --step-1:  clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1vw, 1.9rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 2.9rem);

  /* ---------- espaço / forma ---------- */
  --sp-1: 0.375rem; --sp-2: 0.625rem; --sp-3: 1rem; --sp-4: 1.5rem;
  --sp-5: 2.25rem;  --sp-6: 3.5rem;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---------- sombras (suaves, em camadas) ---------- */
  --shadow-sm: 0 1px 2px rgba(26,35,48,.05), 0 2px 6px rgba(26,35,48,.05);
  --shadow-md: 0 4px 10px rgba(26,35,48,.06), 0 14px 30px rgba(26,35,48,.08);
  --shadow-lg: 0 10px 24px rgba(48,63,83,.10), 0 30px 60px rgba(48,63,83,.12);
  --ring: 0 0 0 3px rgba(80,167,183,.35);

  --ease: cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  /* ---------- 2. SEMÂNTICOS (light = default) ---------- */
  --bg: var(--c-cream-50);
  --surface: var(--c-paper);
  --surface-2: var(--c-sand-100);
  --line: var(--c-line);
  --text: var(--c-ink-900);
  --text-soft: var(--c-ink-500);
  --heading: var(--c-ink-700);
  --accent: var(--c-cyan-500);
  --accent-strong: var(--c-cyan-600);
  --accent-tint: var(--c-cyan-100);
  --on-accent: #ffffff;
  --grain-opacity: .5;
}

html[data-theme="dark"] {
  --bg: var(--c-d-bg);
  --surface: var(--c-d-surface);
  --surface-2: var(--c-d-surface2);
  --line: var(--c-d-line);
  --text: var(--c-d-text);
  --text-soft: var(--c-d-muted);
  --heading: var(--c-d-text);
  --accent: #6fc3d2;
  --accent-strong: #8ad3e0;
  --accent-tint: #214049;
  --on-accent: #07151a;
  --grain-opacity: .25;
  --shadow-md: 0 4px 10px rgba(0,0,0,.3), 0 14px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 10px 24px rgba(0,0,0,.4), 0 30px 60px rgba(0,0,0,.45);
}