/* =========================================================================
   GuiaVivo · Tokens · modo LIVRO  (default / :root)
   -------------------------------------------------------------------------
   - Vive em :root, então é o estado padrão se nenhum data-mode for setado.
   - Outros modos (app, future) sobrescrevem só os tokens que mudam.
   - Estética: editorial, cream warm, serifa italiana, sage como accent.
   ========================================================================= */

:root {

  /* ---- Paleta ---- */
  --paper:        #FAF6EC;
  --paper-warm:   #F5EDD8;
  --paper-deep:   #EFE6CE;
  --paper-cave:   #E9E2D0;   /* fundo do viewport (fora do device) */
  --ink:          #1C1C1A;
  --ink-soft:     #4A4A45;
  --ink-softer:   #78786F;
  --sage:         #5C8F7A;
  --sage-deep:    #3D5A45;
  --sage-soft:    #A8C4B5;
  --sand:         #C9B8A8;
  --sand-soft:    #E3D8C8;

  /* ---- Tokens funcionais (resolvem da paleta) ---- */
  --bg:           var(--paper);
  --bg-alt:       var(--paper-warm);
  --bg-deep:      var(--paper-deep);
  --fg:           var(--ink);
  --fg-soft:      var(--ink-soft);
  --fg-softer:    var(--ink-softer);
  --accent:       var(--sage);
  --accent-deep:  var(--sage-deep);
  --accent-soft:  var(--sage-soft);
  --line:         var(--sand);
  --line-soft:    var(--sand-soft);

  /* Bolha (componente-assinatura) */
  --bubble-body:    rgba(255, 255, 255, 0.78);
  --bubble-glow:    rgba(255, 255, 255, 0.96);
  --bubble-rim:     rgba(92, 143, 122, 0.22);
  --bubble-shadow:  0 10px 30px rgba(60, 90, 69, 0.14);
  --bubble-glow-intensity: 0.6;

  /* Alertas */
  --alert-info:    #8DA89B;
  --alert-warn:    #C9A87C;
  --alert-error:   #B07A6F;
  --alert-success: #6B9B7A;

  /* ---- Tipografia ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* escala modular */
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   36px;
  --text-4xl:   44px;
  --text-5xl:   54px;

  /* leading */
  --lead-tight:   1.15;
  --lead-snug:    1.3;
  --lead-normal:  1.55;
  --lead-relaxed: 1.72;

  /* tracking */
  --track-tight:   -0.015em;
  --track-normal:   0em;
  --track-wide:     0.04em;
  --track-wider:    0.12em;
  --track-widest:   0.22em;

  /* ---- Espaço (grid 4pt) ---- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;

  /* ---- Radii ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   36px;
  --radius-2xl:  48px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --dur-instant:  80ms;
  --dur-fast:    160ms;
  --dur-base:    260ms;
  --dur-slow:    440ms;
  --dur-slower:  700ms;
  --dur-slowest: 1200ms;

  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-organic: cubic-bezier(0.25, 1, 0.5, 1.04);
  --ease-spring:  cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---- Elevation ---- */
  --shadow-soft:  0 1px 2px rgba(28,28,26,0.04), 0 2px 10px rgba(28,28,26,0.05);
  --shadow-lift:  0 6px 20px rgba(28,28,26,0.09), 0 2px 6px rgba(28,28,26,0.04);
  --shadow-page:  0 40px 100px rgba(28,28,26,0.22), 0 16px 40px rgba(28,28,26,0.09);

  /* ---- Layout ---- */
  --device-w: min(92vw, 420px);
  --device-h: min(calc(var(--device-w) * 19.5 / 9), 92vh);
  --device-radius: 23px;
  --content-max: 540px;

  --pad-x: clamp(20px, 6.5vw, 28px);
  --pad-y: clamp(24px, 7vw, 40px);
}

/* em telas bem estreitas, o frame vira tela cheia */
@media (max-width: 520px) {
  :root {
    --device-w: 100vw;
    --device-h: 100dvh;
    --device-radius: 0px;
  }
}