/* ==========================================================================
   BrandPack Embalagens - Design Tokens & Variables
   ========================================================================== */

/* Importação da Fonte Oficial Akt (Google Fonts), Material Symbols Outlined e Dynalight */
@import url('https://fonts.googleapis.com/css2?family=Akt:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,200,1,0');
@import url('https://fonts.googleapis.com/css2?family=Dynalight&display=swap');

:root {
  --font-dynalight: 'Dynalight', cursive;
  /* --- Cores Primárias da Marca (SVGs & Brand Book) --- */
  --color-primary-dark: #13314D;
  /* Azul Marinho Institucional */
  --color-brand-blue: #216FA9;
  /* Azul Brand Pack Principal */
  --color-brand-light: #4487C7;
  /* Azul Claro Destaque Topo Cubo */
  --color-brand-hover: #195887;
  /* Hover State para botões primários */

  /* --- Cores de Apoio & Destaques --- */
  --color-recyclable-green: #10B981;
  /* Verde Selo Reciclada (Tipo C) */
  --color-recyclable-bg: #ECFDF5;
  /* Fundo suave para tags verdes */
  --color-accent-blue: #38BDF8;
  /* Glow & Destaques sutis */

  /* --- Cores Neutras & Superfícies --- */
  --color-white: #FFFFFF;
  --color-bg-light: #F8FAFC;
  /* Fundo neutro secundário */
  --color-bg-card: #FFFFFF;
  --color-bg-card-dark: #13314D;
  /* Fundo escuro azul para cards P/M/G/GG */
  --color-border: #E2E8F0;
  --color-border-dark: #1E405E;

  /* --- Cores de Texto --- */
  --color-text-dark: #0F172A;
  /* Texto de alta legibilidade no claro */
  --color-text-muted: #475569;
  /* Texto secundário no claro */
  --color-text-light: #F8FAFC;
  /* Texto no fundo escuro */
  --color-text-dim: #94A3B8;
  /* Texto secundário no escuro */

  /* --- Tipografia (Akt Font) --- */
  --font-family-base: 'Akt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* --- Espaçamentos da Grade --- */
  --spacing-xs: 0.25rem;
  /* 4px */
  --spacing-sm: 0.85rem;
  /* 13.6px - Conforme solicitado */
  --spacing-md: 1rem;
  /* 16px */
  --spacing-lg: 1.5rem;
  /* 24px */
  --spacing-xl: 2rem;
  /* 32px */
  --spacing-2xl: 3rem;
  /* 48px */
  --spacing-3xl: 4rem;
  /* 64px */

  /* --- Arredondamentos --- */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-full: 9999px;

  /* --- Sombras & Elevações --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(19, 49, 77, 0.15), 0 4px 6px -2px rgba(19, 49, 77, 0.05);
  --shadow-glow: 0 0 25px rgba(33, 111, 169, 0.35);

  /* --- Transições & Animações --- */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Z-Index --- */
  --z-menu: 1000;
  --z-header: 900;
  --z-modal: 1100;
}

/* --- Configuração do Google Material Symbols Outlined --- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 26px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}