:root {

  /* ================================================================
     PRIMÁRIO — Verde
     ================================================================ */

  --color-primary:       #434343;
  --color-primary-hover: #303030;
  --color-primary-dark:  #000000;
  --color-primary-light: rgba(189, 190, 189, 0.3);
  --color-primary-rgb:   27, 158, 27;

  /* ================================================================
     SECUNDÁRIO — Dourado
     ================================================================ */

  --color-secondary:       #F5B800;
  --color-secondary-hover: #E5A800;
  --color-secondary-light: rgba(245, 184, 0, 0.15);
  --color-secondary-rgb:   245, 184, 0;

  /* ================================================================
     ACCENT — Marrom
     ================================================================ */

  --color-accent:       #8B5A2B;
  --color-accent-dark:  #6B4423;
  --color-accent-light: #A67C52;
  --color-accent-rgb:   139, 90, 43;

  /* ================================================================
     TEXTO
     ================================================================ */

  --color-text-primary:   #1A1A1A;
  --color-text-secondary: #424242;
  --color-text-muted:     #666666;
  --color-text-light:     #FFFFFF;
  --color-text-link:      #000000;

  /* ================================================================
     BACKGROUNDS — páginas públicas
     ================================================================ */

  --color-bg-primary:      #F5F5F5;
  --color-bg-secondary:    #FFFFFF;
  --color-bg-tertiary:     #EEEEEE;
  --color-bg-card:         #FFFFFF;
  --color-bg-input:        #FFFFFF;
  --color-bg-overlay:      rgba(0, 0, 0, 0.5);
  --color-bg-header:       #FFFFFF;
  --color-bg-section-alt:  #E8F5E9;

  /* ================================================================
     BACKGROUNDS — app logado (ink-based)
     ================================================================ */

  --color-app-bg:      #F4F6F1;
  --color-app-surface: #FFFFFF;
  --color-app-line:    #E5EAE0;
  --color-app-ink:     #0E1B14;
  --color-app-ink-60:  rgba(14, 27, 20, 0.60);
  --color-app-ink-30:  rgba(14, 27, 20, 0.30);
  --color-app-ink-10:  rgba(14, 27, 20, 0.08);
  --color-app-dark:    #0E1B14;
  --color-app-dark-2:  #152720;

  /* ================================================================
     STATUS
     ================================================================ */

  --color-danger:        #D32F2F;
  --color-danger-light:  rgba(211, 47, 47, 0.10);
  --color-success:       #434343;
  --color-success-light: rgba(189, 190, 189, 0.3);
  --color-warning:       #F5B800;
  --color-warning-light: rgba(245, 184, 0, 0.15);
  --color-info:          #1976D2;
  --color-info-light:    rgba(25, 118, 210, 0.10);

  /* ================================================================
     MODAL
     ================================================================ */

  --color-modal-bg:     #FFFFFF;
  --color-modal-shadow: rgba(0, 0, 0, 0.15);
  --color-modal-scrim:  rgba(0, 0, 0, 0.50);

  /* ================================================================
     GRADIENTES
     ================================================================ */

  --gradient-primary:       linear-gradient(135deg, #434343 0%, #000000 100%);
  --gradient-primary-shine: linear-gradient(90deg, #434343 0%, #000000 50%, #000000 100%);
  --gradient-cta:           linear-gradient(135deg, #434343 0%, #000000 100%);
  --gradient-gold:          linear-gradient(135deg, #F5B800 0%, #FFD700 100%);
  --gradient-yellow-green:  linear-gradient(135deg, #F5B800 0%, #434343 100%);
  --gradient-brown:         linear-gradient(135deg, #8B5A2B 0%, #A67C52 100%);
  --gradient-hero:          linear-gradient(135deg, #F0F4F0 0%, #E8F5E9 50%, #F5F5F5 100%);
  --gradient-card:          linear-gradient(145deg, #FFFFFF 0%, #F8F8F8 100%);
  --gradient-app-dark:      linear-gradient(135deg, #0E1B14 0%, #152720 100%);

  /* ================================================================
     SOMBRAS
     ================================================================ */

  --shadow-sm:           0 2px 6px rgba(0, 0, 0, 0.10);
  --shadow-md:           0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg:           0 8px 28px rgba(0, 0, 0, 0.15);
  --shadow-xl:           0 16px 48px rgba(0, 0, 0, 0.20);
  --shadow-card:         0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-card-hover:   0 8px 32px rgba(0, 0, 0, 0.18);
  --shadow-modal:        0 20px 60px rgba(0, 0, 0, 0.20);
  --shadow-input:        0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-button:       0 4px 12px rgba(189, 190, 189, 0.3);
  --shadow-button-gold:  0 4px 12px rgba(245, 184, 0, 0.40);
  --shadow-glow-primary: 0 4px 20px rgba(189, 190, 189, 0.3);
  --shadow-glow-gold:    0 4px 20px rgba(245, 184, 0, 0.45);
  --shadow-glow-brown:   0 4px 20px rgba(139, 90, 43, 0.30);
  --shadow-app:          0 2px 8px rgba(14, 27, 20, 0.08);
  --shadow-app-md:       0 4px 20px rgba(14, 27, 20, 0.14);

  /* ================================================================
     BORDAS
     ================================================================ */

  --border-primary:       2px solid #000000;
  --border-gold:          2px solid #F5B800;
  --border-subtle:        1px solid #D0D0D0;
  --border-card:          1px solid #CCCCCC;
  --border-input:         2px solid #BDBDBD;
  --border-input-focus:   2px solid #000000;
  --border-input-error:   2px solid #D32F2F;
  --border-input-success: 2px solid #000000;
  --border-app:           1px solid #E5EAE0;

  /* ================================================================
     ALIASES — app logado (--jogo-*)
     Apontam para os tokens canônicos acima para backward compat.
     ================================================================ */

  --jogo-primary:      #000000;
  --jogo-primary-d:    #434343;
  --jogo-primary-soft: rgba(217, 218, 217, 0.12);
  --jogo-ink:          #0E1B14;
  --jogo-ink-60:       rgba(14, 27, 20, 0.60);
  --jogo-ink-30:       rgba(14, 27, 20, 0.30);
  --jogo-ink-10:       rgba(14, 27, 20, 0.08);
  --jogo-surface:      #FFFFFF;
  --jogo-bg:           #F4F6F1;
  --jogo-line:         #E5EAE0;
  --jogo-shadow:       0 2px 8px rgba(14, 27, 20, 0.08);
  --jogo-shadow-md:    0 4px 20px rgba(14, 27, 20, 0.14);

}

/* ========== SCHEDULE ITEMS ========== */
.schedule {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(204, 207, 204, 0.1);
}

.schedule__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  min-width: 70px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  cursor: default;
}

.schedule__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.schedule__item--active {
  background: var(--gradient-primary);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(220, 221, 220, 0.3);
  transform: translateY(-2px) scale(1.05);
}

.schedule__item--active:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 24px rgba(225, 226, 225, 0.35);
}

.schedule__time {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.schedule__item--active .schedule__time {
  color: #fff;
}

.schedule__name {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.schedule__item--active .schedule__name {
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 575px) {
  .schedule {
    gap: 6px;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
  }

  .schedule__item {
    padding: 6px 8px;
    min-width: 54px;
    font-size: .75rem;
    border-radius: var(--radius-sm);
  }

  .schedule__time {
    font-size: .8125rem;
  }

  .schedule__name {
    font-size: .625rem;
  }
}