/* ==========================================================================
   Noel Plus — Design Tokens
   Fonte única da verdade. Todo componente consome estas variáveis —
   nunca hex/px direto no CSS de componente.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------------
     COR — Superfícies (preto, elevação)
     --------------------------------------------------------------------- */
  --color-bg-overlay:     #000000; /* modal / overlay */
  --color-bg-page:        #0A0B0A; /* fundo de página */
  --color-surface-1:      #131513; /* card, superfície nível 1 */
  --color-surface-2:      #1C1F1C; /* superfície elevada */
  --color-border:         #2A2E2A; /* borda, divisor */

  /* ---------------------------------------------------------------------
     COR — Verde (marca, ação, sinal)
     --------------------------------------------------------------------- */
  --color-green-bg:       #0F2A18; /* fundo de badge/tag */
  --color-green-border:   #186B37; /* borda, hover */
  --color-green-base:     #1FA34D; /* verde base, ícones */
  --color-green-primary:  #2ED866; /* botão primário, CTA */
  --color-green-neon:     #39FF7A; /* neon — no máx. 1 destaque por tela */

  /* ---------------------------------------------------------------------
     COR — Acentos secundários (categoria de mídia / gamificação)
     "Especiarias": só em badge/tag/ícone de categoria. Nunca fundo de tela
     ou cor de texto de corpo. Verde + preto = 80%+ de qualquer superfície.
     --------------------------------------------------------------------- */
  --color-accent-gold:     #E8A93C; /* conquistas, moedas, celebração */
  --color-accent-music:    #8B5FBF; /* categoria: música */
  --color-accent-video:    #3C7A8E; /* categoria: vídeo */
  --color-accent-image:    #C97B4A; /* categoria: imagem */
  --color-accent-podcast:  #6B7FA8; /* categoria: podcast */
  --color-accent-games:    #C24E6E; /* categoria: games — única cor "quente/vibrante" fora do eixo mídia */
  --color-accent-apps:     #6B7280; /* categoria: apps — cinza-azulado neutro, deliberadamente menos saturado (utilidade, não conteúdo) */
  --color-accent-books:    #836A54; /* categoria: livros — marrom acinzentado (estante/encadernação), dessaturado pra não competir com dourado/terracota */
  --color-accent-movies:   #4B4FB8; /* categoria: filmes & séries — índigo profundo, entre podcast e música no espectro, remete a cinema sem competir com os vizinhos */

  /* Índigo do "Utilizar" (20/10/2026): o botão das receitas que são ferramenta (o resultado depende do que a pessoa envia), no lugar do Remixar verde.
     Só nesse botão: a cor diz de longe que ele não é o Remixar. */
  --color-indigo-bg:       #191A3D; /* fundo do botão em pílula */
  --color-indigo-border:   #4B4FB8; /* borda (o mesmo índigo de filmes) */
  --color-indigo-text:     #A9ACFF; /* texto e ícone sobre o fundo escuro */
  --color-indigo-primary:  #4B4FB8; /* botão cheio (a página da receita, o mini-player) */
  --color-indigo-hover:    #5D62CF;

  /* Estado de sistema (uso mínimo — formulários) */
  --color-danger:          #E5484D;
  --color-danger-bg:       #2A1414;

  /* ---------------------------------------------------------------------
     COR — Texto
     --------------------------------------------------------------------- */
  --color-text-primary:    #F5F7F2;
  --color-text-secondary:  #9BA69C;
  --color-text-tertiary:   #5F665A;
  --color-text-on-green:   #0A0B0A; /* texto sobre fundo verde sólido */

  /* ---------------------------------------------------------------------
     TIPOGRAFIA — Famílias
     --------------------------------------------------------------------- */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', monospace;

  /* ---------------------------------------------------------------------
     TIPOGRAFIA — Escala (tamanho / peso / tracking / line-height)
     Ver documentação de uso no style-guide para quando usar cada nível.
     --------------------------------------------------------------------- */
  --text-display-2xl-size: 56px; --text-display-2xl-weight: 700; --text-display-2xl-tracking: -0.02em; --text-display-2xl-lh: 1.05;
  --text-display-xl-size:  40px; --text-display-xl-weight:  700; --text-display-xl-tracking:  -0.02em; --text-display-xl-lh:  1.08;
  --text-display-lg-size:  32px; --text-display-lg-weight:  600; --text-display-lg-tracking:  -0.01em; --text-display-lg-lh:  1.12;
  --text-display-md-size:  24px; --text-display-md-weight:  600; --text-display-md-tracking:  -0.01em; --text-display-md-lh:  1.2;

  --text-heading-lg-size:  20px; --text-heading-lg-weight:  600; --text-heading-lg-tracking:  0em; --text-heading-lg-lh:  1.3;
  --text-heading-md-size:  17px; --text-heading-md-weight:  600; --text-heading-md-tracking:  0em; --text-heading-md-lh:  1.35;

  --text-body-lg-size:     16px; --text-body-lg-weight:     400; --text-body-lg-tracking:     0em; --text-body-lg-lh:     1.5;
  --text-body-md-size:     14px; --text-body-md-weight:     400; --text-body-md-tracking:     0em; --text-body-md-lh:     1.5;
  --text-body-sm-size:     12px; --text-body-sm-weight:     500; --text-body-sm-tracking:     0.01em; --text-body-sm-lh:  1.4;

  --text-caption-size:     11px; --text-caption-weight:     600; --text-caption-tracking:     0.04em; --text-caption-lh:  1.3;

  --text-mono-md-size:     13px; --text-mono-md-weight:     400; --text-mono-md-tracking:     0em; --text-mono-md-lh:  1.5;
  --text-mono-sm-size:     11px; --text-mono-sm-weight:     400; --text-mono-sm-tracking:     0em; --text-mono-sm-lh:  1.5;

  /* ---------------------------------------------------------------------
     ESPAÇAMENTO — escala base 4px
     --------------------------------------------------------------------- */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;

  /* ---------------------------------------------------------------------
     RAIO — dois modos: simétrico (utilitário) e "Corte Vivo" (assinatura)
     Corte Vivo = um canto assimétrico (inferior-direito) em formas por
     padrão arredondadas. Ordem CSS: TL TR BR BL — o 3º valor é sempre
     o menor, criando o "corte".
     --------------------------------------------------------------------- */
  --radius-xs:    6px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-pill:  999px;

  --radius-cut-feed:    20px 20px 4px 20px;  /* Feed — corte sutil, orgânico */
  --radius-cut-studio:  12px 12px 2px 12px;  /* Studio — corte técnico, raio menor */
  --radius-cut-hero:    28px 28px 4px 28px;  /* momentos de destaque/celebração */

  /* Corte Vivo em miniatura — ícones e chips pequenos (ex: crédito) */
  --radius-cut-tiny-sm: 5px 5px 2px 5px;
  --radius-cut-tiny-md: 6px 6px 2px 6px;
  --radius-cut-tiny-lg: 8px 8px 3px 8px;

  /* ---------------------------------------------------------------------
     ELEVAÇÃO / SOMBRA
     --------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-glow-green: 0 0 0 1px rgba(46, 216, 102, 0.4), 0 0 24px rgba(57, 255, 122, 0.25);

  /* ---------------------------------------------------------------------
     MOTION — easing / duração
     ease-spring é a assinatura de movimento da marca: mola com leve
     overshoot, nunca linear. Usar em toda confirmação/entrada/unlock.
     ease-standard é reservado para transições utilitárias (fade, hover).
     --------------------------------------------------------------------- */
  --ease-standard:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:        120ms;
  --duration-base:        200ms;
  --duration-slow:        320ms;
  --duration-celebration: 600ms;

  /* ---------------------------------------------------------------------
     ÍCONES — sistema coeso: mesma espessura de traço em todo o produto
     --------------------------------------------------------------------- */
  --icon-stroke-width: 1.75;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;

  /* ---------------------------------------------------------------------
     LAYOUT — constantes estruturais do shell do app (nav, player, header)
     --------------------------------------------------------------------- */
  /* as duas barras somam as áreas do iPhone (o entalhe e a barrinha de voltar ao início) nas telas com viewport-fit=cover: no app instalado e no
     Safari. Fora dele (Android, computador, tela sem entalhe), env() vale 0. PWA, etapa 1 */
  --shell-header-height:     calc(56px + env(safe-area-inset-top, 0px));
  --shell-bottomnav-height:  calc(64px + env(safe-area-inset-bottom, 0px));
  --shell-miniplayer-height: 64px;
  --shell-sidebar-width:     84px;   /* desktop — nav de ícones */
  --shell-sidebar-width-lg:  248px;  /* desktop largo — nav com labels */
  --shell-content-max:       640px;  /* largura de leitura — feed, studio, detalhe */
  --shell-content-max-wide:  1080px; /* largura de grid — imagem, publicações */
  --shell-breakpoint-desktop: 900px;
}