@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;

  /* Cor primária iCompras */
  --primary: #0F4C5C;
  --primary-hover: #136172;
  --primary-dark: #082F38;
  --primary-soft: rgba(15, 76, 92, 0.12);
  --primary-glow: rgba(15, 76, 92, 0.28);

  /* Shell (sidebar + topbar) — mesma paleta */
  --shell: var(--primary);
  --shell-hover: var(--primary-hover);
  --shell-dark: var(--primary-dark);
  --shell-shadow: rgba(15, 76, 92, 0.32);
  --shell-shadow-md: rgba(15, 76, 92, 0.2);
  --shell-shadow-sm: rgba(15, 76, 92, 0.12);

  /* Botões, links e destaques */
  --accent: var(--primary);
  --accent-hover: var(--primary-hover);
  --accent-dark: var(--primary-dark);
  --accent-soft: var(--primary-soft);
  --accent-glow: var(--primary-glow);

  --bg: #f6f7fb;
  --bg-elevated: #ffffff;
  --bg-muted: #eef1f8;

  --text: #14171f;
  --text-secondary: #4b5568;
  --text-tertiary: #7a8494;

  --border: rgba(20, 23, 31, 0.08);
  --border-strong: rgba(20, 23, 31, 0.14);

  --shadow-sm: 0 1px 2px rgba(20, 23, 31, 0.04);
  --shadow-md: 0 8px 30px rgba(15, 76, 92, 0.1);
  --shadow-lg: 0 24px 60px rgba(15, 76, 92, 0.14);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --danger: #c53030;
  --danger-bg: #fff5f5;

  /* Shell autenticado — sidebar e topbar */
  --sidebar-col-width: 4.75rem;
  --sidebar-icon-wrap: 2.65rem;
  --sidebar-pad-inline: 0.55rem;
  --topbar-height: calc(var(--sidebar-icon-wrap) + var(--sidebar-pad-inline) * 2);
  --topbar-pad-x: 0.85rem;
  --topbar-avatar: 2.15rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.45s;

  /* Aliases legados */
  --sidebar-w: 248px;
  --radius: var(--radius-md);
  --white: var(--bg-elevated);
  --gray: var(--text-secondary);
  --shadow: var(--shadow-sm);
}