/* ==========================================================================
   Dani Modas · Design System · Tokens
   Fonte da verdade: dani-modas-admin/public/ds/. A loja usa uma cópia idêntica.
   Documentação: DESIGN_SYSTEM.md e a página /design-system do painel.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  src: url('fontes/montserrat.woff2') format('woff2-variations'), url('fontes/montserrat.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fontes/montserrat-italico.woff2') format('woff2-variations'), url('fontes/montserrat-italico.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Cores da marca (café) ---------- */
  --marca-50:  #FAF6F1;
  --marca-100: #F2E8DE;  /* creme: logo sobre o café */
  --marca-200: #E6D3BF;
  --marca-300: #D3B597;
  --marca-400: #B98E69;
  --marca-500: #8A5A3C;  /* caramelo: detalhes */
  --marca-600: #6B3E2A;
  --marca-700: #4A2618;  /* café: cor principal */
  --marca-800: #3A1D12;
  --marca-900: #26130B;

  /* ---------- Neutros quentes ---------- */
  --neutro-0:   #FFFFFF;
  --neutro-25:  #FCFAF7;
  --neutro-50:  #F7F1EA;  /* areia: fundos claros */
  --neutro-100: #EFE6DB;
  --neutro-200: #E3D6C7;
  --neutro-300: #CDBDAD;
  --neutro-400: #A8968A;
  --neutro-500: #7A685C;
  --neutro-600: #65524A;
  --neutro-700: #4F3F35;
  --neutro-800: #33261F;
  --neutro-900: #1F1611;

  /* ---------- Cores semânticas (texto 4.5:1 sobre o próprio fundo) ---------- */
  --sucesso-fg: #1F5E36; --sucesso-bg: #E8F3EB; --sucesso-borda: #B5D9C0; --sucesso-solido: #2F7A4A;
  --aviso-fg:   #7A4A00; --aviso-bg:   #FDF1DC; --aviso-borda:   #EDCF95; --aviso-solido:   #B7791F;
  --erro-fg:    #9B2318; --erro-bg:    #FBE7E4; --erro-borda:    #EFBBB3; --erro-solido:    #B3261E;
  --info-fg:    #1D4A85; --info-bg:    #E6EEF9; --info-borda:    #B9CDEA; --info-solido:    #2C64B0;

  /* ---------- Papéis (use estes nos componentes) ---------- */
  --cor-fundo:            var(--neutro-50);
  --cor-superficie:       var(--neutro-0);
  --cor-superficie-2:     var(--neutro-25);
  --cor-superficie-3:     var(--neutro-100);
  --cor-borda:            var(--neutro-200);
  --cor-borda-forte:      var(--neutro-300);
  --cor-borda-controle:   #9A877B;             /* bordas de campos: 3.4:1 (WCAG 1.4.11) */
  --cor-texto:            var(--neutro-900);
  --cor-texto-2:          var(--neutro-600);   /* secundário: 6.6:1 no branco */
  --cor-texto-3:          var(--neutro-500);   /* dicas e placeholders: 5.3:1 no branco */
  --cor-texto-inverso:    var(--marca-100);
  --cor-primaria:         var(--marca-700);
  --cor-primaria-hover:   var(--marca-600);
  --cor-primaria-ativa:   var(--marca-800);
  --cor-sobre-primaria:   #FFFCF8;
  --cor-destaque:         var(--marca-500);
  --cor-destaque-suave:   var(--marca-100);
  --cor-foco:             #A06A44;
  --cor-sobreposicao:     rgba(31, 22, 17, 0.48);

  /* ---------- Tipografia ---------- */
  /* Uma família só (Montserrat): a hierarquia vem de tamanho, peso e espaçamento */
  --fonte-titulo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fonte-texto:  'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fonte-mono:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --texto-2xs: 0.6875rem; /* 11px: só selos */
  --texto-xs:  0.75rem;   /* 12px */
  --texto-sm:  0.875rem;  /* 14px */
  --texto-md:  0.875rem;  /* 14px: corpo do painel (Montserrat é larga) */
  --texto-lg:  1rem;      /* 16px: corpo da loja */
  --texto-xl:  1.25rem;   /* 20px */
  --texto-2xl: 1.5rem;    /* 24px */
  --texto-3xl: 2rem;      /* 32px */
  --texto-4xl: 2.5rem;    /* 40px */
  --texto-5xl: 3rem;      /* 48px */

  --peso-normal: 400; --peso-medio: 500; --peso-forte: 600; --peso-titulo: 600;
  --altura-linha-justa: 1.15;
  --altura-linha-titulo: 1.2;
  --altura-linha: 1.6;
  --espaco-letras-caps: 0.14em;

  /* ---------- Espaçamento (base 4px) ---------- */
  --esp-0: 0; --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px;
  --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --esp-12: 48px; --esp-16: 64px; --esp-20: 80px;

  /* ---------- Bordas e raios ---------- */
  --borda: 1px solid var(--cor-borda);
  --raio-xs: 4px; --raio-sm: 6px; --raio-md: 10px; --raio-lg: 14px; --raio-xl: 20px; --raio-pilula: 999px;

  /* ---------- Sombras e elevação ---------- */
  --sombra-0: none;
  --sombra-1: 0 1px 2px rgba(51, 38, 31, 0.06), 0 1px 1px rgba(51, 38, 31, 0.04);
  --sombra-2: 0 4px 12px -2px rgba(51, 38, 31, 0.10), 0 2px 4px -2px rgba(51, 38, 31, 0.06);
  --sombra-3: 0 12px 32px -8px rgba(51, 38, 31, 0.22), 0 4px 8px -4px rgba(51, 38, 31, 0.08);
  --sombra-4: 0 24px 64px -16px rgba(31, 22, 17, 0.35);
  --anel-foco: 0 0 0 3px rgba(160, 106, 68, 0.35);
  --anel-erro: 0 0 0 3px rgba(179, 38, 30, 0.20);

  /* ---------- Controles (alvos de toque ≥ 40px) ---------- */
  --controle-sm: 32px; --controle-md: 40px; --controle-lg: 48px;

  /* ---------- Camadas ---------- */
  --z-fixo: 30; --z-cabecalho: 40; --z-menu: 50; --z-gaveta: 80; --z-dialogo: 90; --z-toast: 100; --z-tour: 110;

  /* ---------- Movimento ---------- */
  --dur-rapida: 120ms; --dur-media: 200ms; --dur-lenta: 320ms;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --curva-saida: cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Larguras de leitura e layout ---------- */
  --largura-conteudo: 1200px;
  --largura-texto: 68ch;
  --largura-barra-lateral: 248px;

  /* Breakpoints (referência; media queries não aceitam variáveis):
     sm 640px · md 768px · lg 1024px · xl 1280px */

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-rapida: 0ms; --dur-media: 0ms; --dur-lenta: 0ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}