/* ==========================================================================
   Herói da Rotina — v1 "Papel de Geladeira"
   Editorial quente: papel creme, tinta preta, carimbo vermelho-tomate.
   --------------------------------------------------------------------------
   Google Fonts:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=IBM+Plex+Mono:wght@500&display=swap" rel="stylesheet">
   ========================================================================== */

:root {
  /* ---- Cores ---- */
  --color-paper:       #F4ECDD; /* fundo principal: papel creme */
  --color-paper-2:     #EADFC9; /* cartões, faixas, quadros */
  --color-ink:         #1E1A16; /* texto, contornos de quadro */
  --color-ink-soft:    #5A5047; /* texto secundário */
  --color-line:        #CDBFA6; /* divisórias, bordas finas */
  --color-accent:      #C2412A; /* CTA, carimbo */
  --color-accent-text: #9E341F; /* texto accent sobre papel (≥4.5:1) */
  --color-accent-hover:#A33522;
  --color-on-accent:   #FFF8EE; /* texto sobre accent (contraste ≈ 5:1) */
  --color-highlight:   #E3A83B; /* marca-texto mostarda, estrelas de conquista */
  --color-support:     #2D4A6B; /* azul caneta: links, notas */
  --color-success:     #4F6B3A; /* check de rotina concluída */

  /* ---- Tipografia ---- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    "Source Serif 4", "Charter", "Georgia", "Times New Roman", serif;
  --font-label:   "IBM Plex Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;

  --fs-xs:   0.8125rem; /* 13 */
  --fs-sm:   0.9375rem; /* 15 */
  --fs-base: 1.125rem;  /* 18 — leitura confortável no celular */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.875rem;  /* 30 */
  --fs-2xl:  2.5rem;    /* 40 */
  --fs-3xl:  clamp(2.5rem, 6vw + 1rem, 4.5rem); /* headline hero */

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-black: 800;

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.6;
  --tracking-label: 0.08em;

  /* ---- Raios ---- */
  --radius-none: 0;
  --radius-sm:   2px;  /* papel recortado, quase reto */
  --radius-md:   6px;
  --radius-pill: 999px;

  /* ---- Sombras (papel sobre papel, nada de glow) ---- */
  --shadow-paper: 0 1px 0 rgba(30, 26, 22, .06), 0 6px 14px -6px rgba(30, 26, 22, .22);
  --shadow-lift:  0 2px 0 rgba(30, 26, 22, .08), 0 14px 28px -10px rgba(30, 26, 22, .28);
  --shadow-stamp: 3px 3px 0 var(--color-ink);

  /* ---- Bordas ---- */
  --border-hair:  1px solid var(--color-line);
  --border-panel: 2px solid var(--color-ink);

  /* ---- Espaçamento (base 4) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --measure: 62ch;

  /* ---- Movimento (≤300ms, ease-out) ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}