/* ==========================================================================
   Design Tokens — Oficina do Livro Editora
   ========================================================================== */

:root {

  /* ─── Brand Colors ──────────────────────────────────────────────────── */

  /* Primário — Azul Marinho (texto do logo) */
  --clr-navy:          #1B3A72;
  --clr-navy-light:    #2855A4;
  --clr-navy-dark:     #122648;
  --clr-navy-subtle:   rgba(27, 58, 114, 0.10);
  --clr-navy-border:   rgba(27, 58, 114, 0.25);

  /* Destaque — Amarelo (linha e caneta do logo) */
  --clr-gold:          #FDC612;
  --clr-gold-light:    #FFD84D;
  --clr-gold-dark:     #C9A000;
  --clr-gold-subtle:   rgba(253, 198, 18, 0.15);
  --clr-gold-border:   rgba(253, 198, 18, 0.35);

  /* CTA — Vermelho (bico da caneta) */
  --clr-red:           #E31E28;
  --clr-red-light:     #F04550;
  --clr-red-dark:      #B5161F;

  --clr-black:         #1A1A1A;
  --clr-azul-escuro:   #1a1A2e;
  --clr-ink:           #2D2D2D;
  --clr-gray-800:      #3D3D3D;
  --clr-gray-700:      #4A4A4A;
  --clr-gray-600:      #5A5654;
  --clr-gray-500:      #6B6B6B;
  --clr-gray-400:      #8A8680;
  --clr-gray-300:      #B0ACA4;
  --clr-gray-200:      #D4CFCA;
  --clr-gray-100:      #E8E4DC;
  --clr-cream:         #F5F0E8;
  --clr-cream-dark:    #EDE8DF;
  --clr-off-white:     #FDFBF8;
  --clr-white:         #FFFFFF;

  --clr-accent:        #E31E28;   /* Vermelho — CTAs e destaques especiais */
  --clr-success:       #2D7A4F;
  --clr-error:         #C0392B;
  --clr-warning:       #D4860A;

  /* Hero overlay */
  --clr-hero-overlay:  rgba(10, 20, 45, 0.65);

  /* ─── Typography ─────────────────────────────────────────────────────── */
  --ff-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --fs-2xs:   clamp(0.625rem, 0.60rem + 0.10vw, 0.688rem);
  --fs-xs:    clamp(0.700rem, 0.68rem + 0.10vw, 0.750rem);
  --fs-sm:    clamp(0.813rem, 0.79rem + 0.12vw, 0.875rem);
  --fs-base:  clamp(0.938rem, 0.90rem + 0.20vw, 1.000rem);
  --fs-md:    clamp(1.063rem, 1.00rem + 0.32vw, 1.125rem);
  --fs-lg:    clamp(1.188rem, 1.10rem + 0.44vw, 1.313rem);
  --fs-xl:    clamp(1.375rem, 1.20rem + 0.88vw, 1.625rem);
  --fs-2xl:   clamp(1.625rem, 1.40rem + 1.13vw, 2.063rem);
  --fs-3xl:   clamp(2.000rem, 1.65rem + 1.75vw, 2.875rem);
  --fs-4xl:   clamp(2.500rem, 2.00rem + 2.50vw, 4.000rem);
  --fs-5xl:   clamp(3.500rem, 2.75rem + 3.75vw, 6.250rem);

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.30;
  --lh-normal:  1.55;
  --lh-relaxed: 1.70;
  --lh-loose:   1.90;

  /* Letter spacing */
  --ls-tighter: -0.04em;
  --ls-tight:   -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.05em;
  --ls-wider:    0.10em;
  --ls-widest:   0.18em;

  /* ─── Spacing ────────────────────────────────────────────────────────── */
  --sp-1:    0.25rem;
  --sp-2:    0.50rem;
  --sp-3:    0.75rem;
  --sp-4:    1.00rem;
  --sp-5:    1.25rem;
  --sp-6:    1.50rem;
  --sp-8:    2.00rem;
  --sp-10:   2.50rem;
  --sp-12:   3.00rem;
  --sp-16:   4.00rem;
  --sp-20:   5.00rem;
  --sp-24:   6.00rem;
  --sp-32:   8.00rem;

  --section-py:   clamp(4rem, 7vw, 7rem);
  --section-px:   clamp(1.25rem, 5vw, 2.5rem);

  /* ─── Layout ─────────────────────────────────────────────────────────── */
  --container:       1260px;
  --container-wide:  1440px;
  --navbar-h:        76px;

  /* ─── Border Radius ──────────────────────────────────────────────────── */
  --r-xs:    2px;
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    14px;
  --r-xl:    20px;
  --r-2xl:   28px;
  --r-full:  9999px;

  /* ─── Shadows ────────────────────────────────────────────────────────── */
  --sh-xs:    0 1px 3px  rgba(0,0,0,0.07);
  --sh-sm:    0 2px 8px  rgba(0,0,0,0.09), 0 1px 2px rgba(0,0,0,0.05);
  --sh-md:    0 4px 16px rgba(0,0,0,0.11), 0 2px 4px rgba(0,0,0,0.06);
  --sh-lg:    0 8px 32px rgba(0,0,0,0.13), 0 4px 8px rgba(0,0,0,0.07);
  --sh-xl:    0 16px 60px rgba(0,0,0,0.18), 0 8px 16px rgba(0,0,0,0.08);
  --sh-gold:  0 4px 24px rgba(253,198,18,0.40);
  --sh-navy:  0 4px 24px rgba(27,58,114,0.30);
  --sh-card:  0 2px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);

  /* ─── Transitions ────────────────────────────────────────────────────── */
  --e-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --e-base:    250ms cubic-bezier(0.4, 0, 0.2, 1);
  --e-slow:    400ms cubic-bezier(0.4, 0, 0.2, 1);
  --e-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-index scale ──────────────────────────────────────────────────── */
  --z-below:     -1;
  --z-base:       0;
  --z-raised:    10;
  --z-float:     50;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}