/* ============================================================
   DESIGN TOKENS — Sociedade do Anel: Uma Jornada Comentada
   ============================================================ */

:root {
  /* ── Cores ── */
  --color-bg-primary:     #080604;
  --color-bg-secondary:   #100d08;
  --color-bg-card:        #16110a;
  --color-bg-accent:      #1c1508;

  --color-gold-deep:      #7a5a1a;
  --color-gold:           #c9973a;
  --color-gold-light:     #e8c060;
  --color-gold-bright:    #f5d980;
  --color-gold-glow:      rgba(201, 151, 58, 0.18);

  --color-text-primary:   #f0e6d0;
  --color-text-secondary: #b8a080;
  --color-text-muted:     #6e5c40;

  --color-border:         rgba(201, 151, 58, 0.25);
  --color-border-strong:  rgba(201, 151, 58, 0.55);

  /* ── Tipografia ── */
  --font-display:  'Cinzel Decorative', 'Cinzel', serif;
  --font-title:    'Cinzel', serif;
  --font-body:     'Crimson Text', Georgia, serif;
  --font-ui:       'Crimson Text', Georgia, serif;

  --size-xs:   0.75rem;
  --size-sm:   0.875rem;
  --size-base: 1.125rem;
  --size-md:   1.35rem;
  --size-lg:   1.75rem;
  --size-xl:   2.25rem;
  --size-2xl:  3rem;
  --size-3xl:  4rem;
  --size-hero: clamp(2.4rem, 6vw, 5.5rem);

  /* ── Espaçamento ── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  7rem;
  --space-2xl: 10rem;

  /* ── Bordas e sombras ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  --shadow-glow:  0 0 40px rgba(201, 151, 58, 0.15);
  --shadow-card:  0 4px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(201, 151, 58, 0.12);
  --shadow-text:  0 0 30px rgba(201, 151, 58, 0.4);

  /* ── Transições ── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 200ms;
  --duration-md:   400ms;
  --duration-slow: 700ms;

  /* ── Layout ── */
  --container-max: 1280px;
  --container-narrow: 720px;
  --section-padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 3rem);
}