/* CineStream — Design Tokens (redesign cinematográfico) */

:root {
  /* ── Acento âmbar ── */
  --accent:        #f0c889;
  --accent-strong: #ffd49a;
  --accent-hover:  #c8a060;
  --accent-ink:    #1a120a;

  /* ── Fundos quentes ── */
  --bg:            #0a0908;
  --bg-1:          #0f0d0b;
  --bg-2:          #15120f;
  --bg-3:          #1d1915;
  --bg-glass:      rgba(15, 13, 11, 0.80);

  /* Aliases de compatibilidade para modal.js/streams.js */
  --bg-card:       #15120f;
  --bg-card-hover: #1d1915;
  --bg-header:     rgba(15, 13, 11, 0.80);
  --bg-modal:      #0f0d0b;
  --bg-overlay:    rgba(0, 0, 0, 0.78);

  /* ── Texto ── */
  --text:          #f5f1ea;
  --text-2:        #b8b1a5;
  --text-3:        #6e6960;
  --text-4:        #3e3a34;

  /* Aliases */
  --text-muted:    #b8b1a5;
  --text-dim:      #6e6960;

  /* ── Bordas ── */
  --line:          rgba(255, 240, 220, 0.07);
  --line-2:        rgba(255, 240, 220, 0.14);
  --border:        rgba(255, 240, 220, 0.07);
  --border-hover:  rgba(255, 240, 220, 0.14);

  /* ── Tipografia ── */
  --font-display:  'Instrument Serif', 'Times New Roman', serif;
  --font-ui:       'Manrope', system-ui, -apple-system, sans-serif;
  --font-family:   'Manrope', system-ui, -apple-system, sans-serif;

  --font-size-xs:  0.75rem;
  --font-size-sm:  0.875rem;
  --font-size-md:  1rem;
  --font-size-lg:  1.125rem;
  --font-size-xl:  1.5rem;
  --font-size-2xl: 2rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;

  /* ── Espaçamento ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Layout ── */
  --shell-pad:     clamp(20px, 4vw, 56px);
  --row-gap:       clamp(40px, 5vw, 64px);
  --card-w:        clamp(150px, 13vw, 200px);
  --header-height: 64px;
  --max-width:     1400px;
  --grid-gap:      20px;

  /* ── Bordas arredondadas ── */
  --radius:    6px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --radius-xl: 24px;

  /* ── Sombras ── */
  --shadow-card:  0 24px 60px -20px rgba(0,0,0,0.65), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-modal: 0 24px 60px rgba(0,0,0,0.8);
  --shadow-glow:  0 0 20px rgba(240, 200, 137, 0.25);

  /* ── Z-index ── */
  --z-header:  50;
  --z-overlay: 200;
  --z-modal:   300;

  /* ── Transições ── */
  --transition:      all 0.2s ease;
  --transition-slow: all 0.35s ease;
}