/* Weex Design System — Spacing, Radius & Shadow Tokens */
/* Base unit: 4px | Radii extraídos do protótipo real */

:root {

  /* ── SPACING — escala de interação curada · decisão: híbrida 2px / 4px ── */
  /* Faixa fina (passos de 2px) onde a densidade gamificada vive (gaps de    */
  /* ícone, padding de tile, listas); faixa grande coesa (passos largos).    */
  /* Convenção: o número do token É o valor em px. Não usar valores fora     */
  /* desta escala (10 passos de conteúdo + 2 estruturais).                   */
  --space-2:   2px;   /* micro — gap ícone/label */
  --space-4:   4px;   /* gap mínimo */
  --space-6:   6px;   /* gap pequeno */
  --space-8:   8px;   /* gap padrão */
  --space-10:  10px;  /* gap médio / lista densa */
  --space-12:  12px;  /* gap interno de card */
  --space-16:  16px;  /* padding padrão */
  --space-24:  24px;  /* padding de card / bloco */
  --space-32:  32px;  /* separação de seção */
  --space-48:  48px;  /* separação grande */
  /* Estruturais — layout/seção, fora do ritmo de conteúdo */
  --space-64:  64px;
  --space-80:  80px;

  /* Semantic — eixos separados (use -x / -y; o composto é conveniência) */
  --spacing-page-y:   22px;
  --spacing-page-x:   28px;
  --spacing-page:     var(--spacing-page-y) var(--spacing-page-x);   /* padding de páginas internas */
  --spacing-card-y:   16px;
  --spacing-card-x:   18px;
  --spacing-card:     var(--spacing-card-y) var(--spacing-card-x);   /* padding de cards */
  --spacing-card-kpi-y: 13px;
  --spacing-card-kpi-x: 15px;
  --spacing-card-kpi: var(--spacing-card-kpi-y) var(--spacing-card-kpi-x); /* padding de cards KPI */
  --spacing-modal-y:  18px;
  --spacing-modal-x:  20px;
  --spacing-modal:    var(--spacing-modal-y) var(--spacing-modal-x);   /* padding de modais */

  /* ── BORDER RADIUS ── */
  /* DUAS escalas legítimas e documentadas:                              */
  /*  • ADMIN (denso, B2B): 6–14px — extraído do protótipo da plataforma  */
  /*  • APP (amigável): 12–20px — superfícies do participante / controles */

  /* Escala ADMIN (plataforma densa) */
  --radius-sm:    6px;     /* botões de paginação, ícone-botão */
  --radius-md:    7px;     /* tb-btn, filtros, dropdowns */
  --radius-input: 8px;     /* inputs e selects da plataforma */
  --radius-card:  11px;    /* cards e tbl-wrap da plataforma */
  --radius-modal: 14px;    /* modais da plataforma */

  /* Escala APP (controles arredondados — botões/cards/modais do app) */
  --radius-control-xs: 10px;
  --radius-control-sm: 12px;
  --radius-control:    14px;  /* default de controle (app tone) */
  --radius-control-lg: 16px;
  --radius-control-xl: 20px;
  --radius-card-app:   16px;  /* cards do app participante */
  --radius-modal-app:  20px;  /* modais/sheets do app */

  --radius-full:  9999px; /* badges, toggles, pills, avatars */

  /* ── RITMO DE CHIP/PÍLULA ──                                                 */
  /* Um único ritmo para a família de chips de CONTEÚDO (TagCategoria,          */
  /* ChipPremio, e os chips inline que ainda existem). Antes: dot 5/6/7,        */
  /* gap 4/6, padding 2×9 / 3×10 / 4×10 soltos. O Badge (etiqueta de status)    */
  /* tem escala própria — mais apertada — e não usa estes tokens.              */
  --chip-radius: var(--radius-full);
  --chip-gap:    var(--space-6);   /* 6px entre dot/ícone e label */
  --chip-dot:    6px;              /* ponto indicador */
  --chip-pad:    4px 10px;         /* padding padrão do chip de conteúdo */

  /* ── MOLDURA DO APP (mock mobile do participante) ── */
  /* As alturas de componente (botão, input, toggle…) são propriedade dos     */
  /* próprios componentes — não há token para elas (evita token-mentira).     */
  --app-frame-min-h: 640px;   /* altura mínima uniforme da tela mobile */

  /* ── SOMBRAS ── */
  --shadow-card:     0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-modal:    0 20px 60px color-mix(in oklab, var(--brand-light) 18%, transparent);
  --shadow-toast:    0 8px 24px rgba(0, 0, 0, 0.20);
  --shadow-btn:      none; /* botões da plataforma admin — sem sombra */
  --shadow-btn-brand: 0 4px 16px color-mix(in oklab, var(--brand) 35%, transparent); /* CTA roxo (app tone) — tinge com a marca */
  --shadow-card-hover: 0 8px 28px color-mix(in oklab, var(--brand) 14%, transparent); /* card interativo em hover (lift) */
  --shadow-card-dark:  0 8px 24px rgba(0, 0, 0, 0.25);     /* card/toast elevado sobre superfície escura */
  --shadow-card-pop:   0 4px 24px color-mix(in oklab, var(--brand) 8%, transparent); /* card do app com elevação suave (gate/destaque) */
  --shadow-brand-glow: 0 8px 40px color-mix(in oklab, var(--brand) 35%, transparent); /* glow de marca — hero/tile sobre gradiente */

  /* ── FOCUS RING (acessibilidade) ── */
  --focus-ring:        0 0 0 3px color-mix(in oklab, var(--brand) 30%, transparent);  /* anel de foco — tinge com a marca */
  --focus-ring-err:    0 0 0 3px rgba(220, 38, 38, 0.18);  /* erro */

  /* ── Z-INDEX ── */
  --z-dropdown: 50;  /* @kind other */
  --z-sticky:   100; /* @kind other */
  --z-modal:    200; /* @kind other */
  --z-toast:    300; /* @kind other */
}