/* ============================================================
   Halky Web — Design Tokens (Fase 1)
   Tokens estruturais (não dependem de tema): tipografia, escala de
   espaçamento, raios, sombras, transições e medidas do shell. As cores
   vêm de themes.css via as variáveis --theme-* (vocabulário do legado),
   e aqui criamos aliases semânticos para o núcleo novo.
   Escala espelha o app Mobile: spacing 4/8/12/16/22/24/32; radius 16/22/999.
   ============================================================ */

:root {
  /* Tipografia */
  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: 38px;
  --fs-4xl: 48px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* Espaçamento */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Raios */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Sombras (combinam com o glow do tema) */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .18);
  --shadow-md: 0 10px 28px var(--theme-shadow-color, rgba(0, 0, 0, .28));
  --shadow-lg: 0 22px 55px rgba(0, 0, 0, .45);
  --shadow-glow: 0 0 0 1px var(--theme-glow-soft, transparent), 0 16px 40px var(--theme-glow-soft, rgba(0, 0, 0, .25));

  /* Transições */
  --transition-fast: .15s ease;
  --transition: .25s ease;
  --transition-slow: .4s cubic-bezier(.4, 0, .2, 1);

  /* Medidas do shell */
  --sidebar-w: 360px;
  --header-h: 104px; /* reserva TOTAL da barra premium: 72px de altura + 2×16px de margem flutuante (o chat usa isto p/ caber sem rolagem) */
  --mobilenav-h: 66px;
  --content-max: 1180px;
  --z-header: 40;
  --z-sidebar: 50;
  --z-drawer: 80;
  --z-scrim: 70;

  /* ---- Aliases semânticos -> tokens de tema ---- */
  --color-primary: var(--theme-primary-color);
  --color-secondary: var(--theme-secondary-color);
  --color-accent: var(--theme-accent-color);
  --text-primary: var(--theme-text-primary);
  --text-secondary: var(--theme-text-secondary);
  --surface-card: var(--theme-bg-tertiary);
  --surface-raised: var(--theme-bg-secondary);
  --border-color: var(--theme-border-color);
  --border-glass: var(--theme-glass-border);
  --success: var(--theme-success-color);
  --error: var(--theme-error-color);
  --warning: #f39c12;
  --glass-blur: blur(22px) saturate(180%);

  /* ---- Glassmorphism premium (camadas de vidro) ---- */
  --glass-bg: color-mix(in srgb, var(--surface-card) 76%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  --glass-stroke: var(--theme-glass-border);
  --glass-highlight: color-mix(in srgb, #ffffff 14%, transparent);
  --glass-blur-lg: blur(34px) saturate(185%);

  /* ---- Primeiro plano sobre PREENCHIMENTOS coloridos (desacoplado da MARCA) ----
     Princípio: --color-primary é IDENTIDADE de marca; NUNCA define o contraste
     do conteúdo. Texto/ícone POR CIMA de um preenchimento colorido (botão,
     avatar, ícone-herói, coroa, balão) usa estes tokens — nunca #fff fixo.
     Default = branco; themes.css sobrescreve --theme-on-primary para ESCURO
     nos temas de primary claro (ex.: Midnight OLED #fff, Arctic Blue #06ff79),
     eliminando branco-no-branco. */
  --on-primary: var(--theme-on-primary, #fff);
  --button-foreground: var(--on-primary);
  --badge-foreground: var(--on-primary);
  --icon-on-brand: var(--on-primary);

  /* Tom neon por módulo (sobrescrito por [data-mod=...] em components.css) */
  --m-accent: var(--color-primary);
  --m-accent-2: var(--color-secondary);
  /* Primeiro plano sobre o preenchimento do MÓDULO. Cor do módulo é fixa
     (independe do tema) -> cada linha [data-mod] fixa seu --m-on; o default
     segue o tema para o caso de fallback (--m-accent == --color-primary). */
  --m-on: var(--on-primary);
  --sidebar-active-icon: var(--m-on);
}