/* ==========================================================================
   LaryTrick Web — Design Tokens
   Portado 1:1 dos recursos do app Android (colors.xml / themes.xml).
   Tema padrão: Black + Magenta (igual ao app na instalação nova).
   ========================================================================== */

:root {
  /* ---- Presets de fundo/superfície (trocam com "Tema") ---- */
  --bg: #000000;
  --bg-secondary: #0a0a0a;
  --surface: #0c0c0c;
  --surface-elevated: #1a1a1a;

  --text-primary: #ffffff;
  --text-secondary: #c7bdd8;
  --text-muted: #a0a0a0;
  --border: rgba(255, 255, 255, 0.12);

  --success: #4ade80;
  --warning: #ffb020;
  --error: #ff6b6b;
  --on-primary: #ffffff;

  /* ---- Accent ativo (troca com "Cor de destaque") — default Magenta ---- */
  --accent-primary: #ff2ec4;
  --accent-strong: #c2189a;
  --accent-light: #ff8ae0;
  --accent-border: rgba(255, 46, 196, 0.55);
  --accent-glow: #c2189a;

  /* ---- Tipografia ----
     Clash Display / General Sans via Fontshare (grátis, uso comercial livre).
     Montserrat Black via Google Fonts — reservado só pro wordmark "LARYTRICK". */
  --font-display-bold: "Clash Display", "General Sans", -apple-system, sans-serif;
  --font-display-semibold: "Clash Display", "General Sans", -apple-system, sans-serif;
  --font-wordmark: "Montserrat", -apple-system, sans-serif;
  --font-regular: "General Sans", -apple-system, "SF Pro Text", sans-serif;
  --font-medium: "General Sans", -apple-system, sans-serif;
  --font-semibold: "General Sans", -apple-system, sans-serif;
  --font-bold: "General Sans", -apple-system, sans-serif;

  /* ---- Escala de texto (sp do Android ~= px aqui, 1sp ≈ 1px em telas base) ---- */
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-18: 18px;
  --text-20: 20px;
  --text-21: 21px;
  --text-24: 24px;
  --text-25: 25px;
  --text-28: 28px;
  --text-29: 29px;

  /* ---- Espaçamento (dp do Android ~= px aqui) ---- */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-32: 32px;

  /* ---- Raios / corte de canto ---- */
  --radius-input: 16px;
  --radius-pill: 999px;
  --radius-panel: 20px;
  --radius-flat: 8px;

  /* Card com canto cortado (ShapeAppearance.LaryTrick.Card):
     topo-esquerdo 4dp arredondado, topo-direito 28dp cortado,
     inferior-direito e inferior-esquerdo 4dp arredondado. */
  --card-round: 4px;
  --card-cut: 28px;

  /* Tile — variante menor (grades 2 colunas): 3dp arredondado, 18dp cortado. */
  --tile-round: 3px;
  --tile-cut: 18px;

  /* ---- Elevação (sombra) ---- */
  --shadow-0: none;
  --shadow-6: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-8: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-16: 0 10px 28px rgba(0, 0, 0, 0.5);
  --shadow-24: 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-32: 0 22px 56px rgba(0, 0, 0, 0.6);

  /* ---- Animação ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-mult: 1;
}

/* ---- Presets de tema alternativos (aplicados via [data-theme] no <html>) ---- */
html[data-theme="amoled"] {
  --bg: #000000;
  --bg-secondary: #000000;
  --surface: #050505;
  --surface-elevated: #0d0d0d;
}

html[data-theme="midnight"] {
  --bg: #05040e;
  --bg-secondary: #0a0818;
  --surface: #120e24;
  --surface-elevated: #1c1633;
  --text-secondary: #c2bee0;
}

html[data-theme="white"] {
  --bg: #ffffff;
  --bg-secondary: #f5f3f8;
  --surface: #fbfafc;
  --surface-elevated: #f0ecf6;
  --text-primary: #17121f;
  --text-secondary: #4b4458;
  --text-muted: #847d91;
  --border: #e6e0ed;
  --success: #1e9a54;
  --warning: #b05f00;
  --error: #d93a54;
}

/* ---- Presets de cor de destaque (aplicados via [data-accent] no <html>) ---- */
html[data-accent="purple"] {
  --accent-primary: #a020f0;
  --accent-strong: #7a18b8;
  --accent-light: #c77dff;
  --accent-border: rgba(160, 32, 240, 0.55);
  --accent-glow: #7a18b8;
}
html[data-accent="magenta"] {
  --accent-primary: #ff2ec4;
  --accent-strong: #c2189a;
  --accent-light: #ff8ae0;
  --accent-border: rgba(255, 46, 196, 0.55);
  --accent-glow: #c2189a;
}
html[data-accent="violet"] {
  --accent-primary: #7c3aed;
  --accent-strong: #5b21b6;
  --accent-light: #b794f6;
  --accent-border: rgba(124, 58, 237, 0.55);
  --accent-glow: #5b21b6;
}
html[data-accent="cyan"] {
  --accent-primary: #0ea5c4;
  --accent-strong: #0b7a93;
  --accent-light: #67e8f9;
  --accent-border: rgba(14, 165, 196, 0.55);
  --accent-glow: #0b7a93;
}
html[data-accent="red"] {
  --accent-primary: #ff4d4d;
  --accent-strong: #c21f1f;
  --accent-light: #ff9494;
  --accent-border: rgba(255, 77, 77, 0.55);
  --accent-glow: #c21f1f;
}
html[data-accent="crimson"] {
  --accent-primary: #e1061e;
  --accent-strong: #a80417;
  --accent-light: #ff5a6c;
  --accent-border: rgba(225, 6, 30, 0.55);
  --accent-glow: #a80417;
}

/* ---- Animações (multiplicador global, ver "Animações" na Personalização) ---- */
html[data-anim="reduced"] { --duration-mult: 0.45; }
html[data-anim="normal"] { --duration-mult: 1; }
html[data-anim="intense"] { --duration-mult: 1.6; }

/* ---- Densidade de interface (ver "Interface" na Personalização) ---- */
html[data-density="compact"] { --density-mult: 0.82; }
html[data-density="standard"] { --density-mult: 1; }
html[data-density="comfortable"] { --density-mult: 1.18; }