:root {
  /* Paleta base — sobrescrita pelo tema ativo (admin) */
  --bg-void: #050508;
  --bg-deep: #0a0b10;
  --bg-surface: #12141c;
  --bg-elevated: #1a1d28;
  --bg-glass: rgba(18, 20, 28, 0.88);

  --accent-primary: #00e68a;
  --accent-secondary: #3b9eff;
  --accent-hot: #ff3d6e;
  --accent-gold: #ffc947;
  --accent-purple: #8b5cf6;
  --on-accent: #04140d;

  --text-primary: #f4f6fb;
  --text-secondary: #9aa3b8;
  --text-muted: #5c6478;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glow: color-mix(in srgb, var(--accent-primary) 45%, transparent);

  /* Aliases de páginas — sempre derivados dos tokens globais */
  --sb-green: var(--accent-primary);
  --sb-green-soft: color-mix(in srgb, var(--accent-primary) 85%, #000);
  --sb-green-hover: color-mix(in srgb, var(--accent-primary) 82%, #000);
  --sb-bg: var(--bg-deep);
  --sb-surface: var(--bg-surface);
  --sb-row-hover: color-mix(in srgb, var(--text-primary) 4%, transparent);
  --sb-row-active: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  --sb-text: var(--text-primary);
  --sb-muted: var(--text-secondary);

  --agent-panel: var(--bg-surface);
  --agent-panel-border: var(--border-subtle);
  --agent-accent: var(--accent-primary);
  --agent-accent-soft: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  --agent-gold: var(--accent-gold);
  --agent-warn: var(--accent-hot);

  --vip-accent: var(--accent-gold);
  --vip-accent-soft: color-mix(in srgb, var(--accent-gold) 12%, transparent);
  --vip-gold: var(--accent-gold);
  --vip-panel: var(--bg-surface);
  --vip-panel-border: var(--border-subtle);

  --profile-accent: var(--accent-gold);
  --profile-accent-soft: color-mix(in srgb, var(--accent-gold) 14%, transparent);
  --profile-card: var(--bg-elevated);
  --profile-card-border: var(--border-subtle);
  --profile-action-bg: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bg-elevated) 82%, var(--accent-secondary)) 0%,
    var(--bg-surface) 100%
  );

  --browse-gold: var(--accent-gold);

  /* Chrome do app — header / sidebar / canvas no mesmo tom */
  --header-bg: var(--bg-deep);
  --desktop-canvas: var(--bg-deep);
  --desktop-panel: var(--bg-surface);
  --desktop-panel-border: var(--border-subtle);

  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 8px 32px color-mix(in srgb, var(--accent-primary) 12%, transparent);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.7);

  --font-display: "Outfit", system-ui, -apple-system, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;

  --text-xs: clamp(0.7rem, 2vw, 0.75rem);
  --text-sm: clamp(0.8rem, 2.2vw, 0.875rem);
  --text-base: clamp(0.9rem, 2.5vw, 1rem);
  --text-lg: clamp(1.05rem, 3vw, 1.25rem);
  --text-xl: clamp(1.25rem, 4vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 6vw, 2.5rem);
  --text-hero: clamp(2rem, 8vw, 3.25rem);

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Ritmo de layout — escala única para alturas/larguras */
  --layout-inline: var(--container-pad);
  --layout-gap-tight: var(--space-sm);
  --layout-gap-inner: var(--space-md);
  --layout-gap-block: var(--space-lg);
  --layout-gap-section: var(--space-xl);
  --layout-gap-page: var(--space-2xl);

  --page-top-offset: 1.75rem;
  --section-stack: var(--layout-gap-section);
  --section-head-gap: var(--layout-gap-inner);
  --block-gap: var(--layout-gap-inner);
  --carousel-gap: var(--layout-gap-inner);

  --header-h: 3.5rem;
  --nav-bottom-h: 4.25rem;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --container-pad: clamp(1rem, 4vw, 1.5rem);
  --layout-column-max: 72rem;
  --layout-column-offset: var(--container-pad);
  --bg-lane-side: var(--bg-void);
  --bg-lane-center: var(--bg-deep);
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-full: 9999px;

  /* Capa do jogo — grade (106 × 140.95) */
  --game-thumb-w: 106px;
  --game-thumb-h: 140.95px;
  --game-thumb-ratio: 106 / 140.95;

  /*
   * Carrossel Top jogos — medidas da referência
   * lateral: 88.7 × 117.97 | centro: 103.48 × 137.63 | gap: 36.96
   * centro ÷ lateral = 1.1667 (mesma proporção 3:4)
   */
  --game-carousel-ratio: 88.7 / 117.97;
  --game-carousel-w-side: 88.7px;
  --game-carousel-w-center: 103.48px;
  --game-carousel-h-side: 117.97px;
  --game-carousel-h-center: 137.63px;
  --game-carousel-gap: var(--block-gap);
  --game-carousel-center-factor: 1.1667;
  --game-carousel-info-h: 2.35rem;
  --game-carousel-block-h: calc(var(--game-carousel-h-center) + var(--game-carousel-info-h));

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 280ms;
  --duration-slow: 450ms;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: dark;
  }
}

@media (min-width: 768px) {
  :root {
    --layout-column-offset: max(var(--container-pad), calc((100vw - var(--layout-column-max)) / 2));
    --page-top-offset: 2rem;
    --section-stack: var(--layout-gap-page);
    --section-head-gap: var(--layout-gap-block);
    --block-gap: var(--layout-gap-inner);
    /* escala desktop mantendo as mesmas proporções */
    --game-carousel-w-side: 106px;
    --game-carousel-w-center: 123.67px;
    --game-carousel-h-side: 140.95px;
    --game-carousel-h-center: 164.46px;
  }
}