/* ==========================================================================
   Francesca Fabbrini Jewels — :root do design system (v3, design novo)
   Mantém só as fontes (Prata, Mulish) e as cores da marca (champagne, ouro, ink).
   Tudo o resto sai daqui: nenhum valor digitado à mão em widgets ou CSS.
   Contrastes verificados (WCAG 2): anotados ao lado de cada par de texto.
   ========================================================================== */

:root {
  /* ---------- 1. Cores da marca (as únicas "cores" do site) ---------- */
  --ff-champagne: #F4E4A9;      /* cor-assinatura: fundos de destaque, badges, faixas */
  --ff-gold: #CC932C;           /* ouro: botão de compra, detalhes, ícones ativos */
  --ff-ink: #1A1A1A;            /* preto da marca: texto, títulos, botões secundários */
  --ff-white: #FFFFFF;

  /* Variações derivadas das cores da marca (mesmo tom, mais claro/escuro) */
  --ff-champagne-50: #FDF6E3;   /* fundo muito leve: faixas de info, cronômetro */
  --ff-gold-hover: #D9A441;     /* hover do botão ouro (ink em cima: 7.7:1) */
  --ff-gold-text: #7A520F;      /* ouro legível para TEXTO em fundo claro (6.9:1 no branco) */

  /* ---------- 2. Neutros (cinzas quentes, sem cor própria) ---------- */
  --ff-gray-50: #F7F6F3;        /* fundo de página alternativo, área de filtros */
  --ff-gray-100: #EFEDE8;       /* fundo de campos desativados, skeleton */
  --ff-gray-200: #E3E0D9;       /* bordas decorativas, divisórias */
  --ff-gray-400: #8C877C;       /* bordas de campos e controles (3.6:1 no branco) */
  --ff-gray-600: #6B675F;       /* texto secundário (5.6:1 no branco, 5.2:1 no gray-50) */
  --ff-gray-800: #3D3A35;       /* texto corrido (11.3:1 no branco) */

  /* ---------- 3. Status (só em mensagens, nunca decoração) ---------- */
  --ff-error: #5c0000;          /* 8.4:1 no branco */
  --ff-error-bg: #FBEAEA;
  --ff-success: #D9A441;        /* 4.9:1 no branco */
  --ff-success-bg: #EAF2EC;
  --ff-info-bg: var(--ff-champagne-50);

  /* ---------- 4. Tokens semânticos (use ESTES nos componentes) ---------- */
  --ff-bg: var(--ff-white);                 /* fundo da página */
  --ff-bg-alt: var(--ff-gray-50);           /* seções alternadas, barra de filtros */
  --ff-surface: var(--ff-white);            /* cards, painéis, modais */
  --ff-text: var(--ff-ink);                 /* títulos e texto forte (17.4:1) */
  --ff-text-body: var(--ff-gray-800);       /* texto corrido */
  --ff-text-muted: var(--ff-gray-600);      /* legendas, meta, placeholder */
  --ff-border: var(--ff-gray-200);          /* divisórias e cards */
  --ff-border-strong: var(--ff-gray-400);   /* campos, radios, checkboxes */
  --ff-link: var(--ff-ink);
  --ff-link-hover: var(--ff-gold-text);

  --ff-cta-bg: var(--ff-gold);              /* botão de compra: ouro com texto ink (6.45:1) */
  --ff-cta-text: var(--ff-ink);
  --ff-cta-bg-hover: var(--ff-gold-hover);
  --ff-btn-bg: var(--ff-ink);               /* botão principal neutro */
  --ff-btn-text: var(--ff-white);
  --ff-btn-bg-hover: var(--ff-gray-800);

  --ff-price: var(--ff-ink);
  --ff-price-sale: var(--ff-gold-text);     /* preço com desconto */
  --ff-price-old: var(--ff-gray-600);       /* preço riscado */
  --ff-badge-bg: var(--ff-ink);             /* badge de desconto "-40%" (champagne em cima: 13.7:1) */
  --ff-badge-text: var(--ff-champagne);
  --ff-badge-alt-bg: var(--ff-champagne);   /* badge "Novo", "Últimas peças" (ink em cima: 13.7:1) */
  --ff-badge-alt-text: var(--ff-ink);
  --ff-selected: var(--ff-ink);             /* opção escolhida: tamanho, frete, pagamento */
  --ff-selected-bg: var(--ff-champagne-50);
  --ff-focus: var(--ff-ink);

  /* ---------- 5. Tipografia ---------- */
  --ff-font-display: "Prata", Georgia, serif;           /* só peso 400 */
  --ff-font-body: "Mulish", system-ui, sans-serif;      /* 400, 600, 700 */

  --ff-fw-regular: 400;
  --ff-fw-semibold: 600;
  --ff-fw-bold: 700;          /* só preços e badges */

  /* Escala (desktop). O bloco @media abaixo reduz para mobile. */
  --ff-fs-display: 48px;  --ff-lh-display: 56px;   /* H1 de campanha / home */
  --ff-fs-h1: 36px;       --ff-lh-h1: 44px;        /* H1 das páginas */
  --ff-fs-h2: 28px;       --ff-lh-h2: 36px;
  --ff-fs-h3: 20px;       --ff-lh-h3: 28px;
  --ff-fs-lg: 18px;       --ff-lh-lg: 28px;        /* intro, descrição */
  --ff-fs-md: 16px;       --ff-lh-md: 24px;        /* texto padrão, campos */
  --ff-fs-sm: 14px;       --ff-lh-sm: 20px;        /* texto de card, listas */
  --ff-fs-xs: 12px;       --ff-lh-xs: 16px;        /* legendas, badges, meta */
  --ff-fs-price: 18px;    --ff-lh-price: 24px;     /* preço em card */
  --ff-fs-price-lg: 24px; --ff-lh-price-lg: 32px;  /* preço na página de produto / total */
  --ff-ls-caps: 0.08em;   /* MAIÚSCULAS (botões, marca no card, badges) */

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

  --ff-gutter: 24px;            /* espaço entre colunas (mobile: 12px) */
  --ff-page-x: 32px;            /* margem lateral da página (mobile: 16px) */
  --ff-section-y: 64px;         /* espaço vertical entre seções (mobile: 40px) */
  --ff-card-pad: 12px;          /* padding do texto dos cards de produto */
  --ff-panel-pad: 24px;         /* padding de painéis (resumo, blocos do checkout) */

  /* ---------- 7. Layout ---------- */
  --ff-container: 1280px;       /* loja, listagens, produto */
  --ff-container-checkout: 1080px;
  --ff-container-text: 760px;   /* páginas de leitura */
  --ff-header-h: 64px;
  --ff-nav-h: 48px;
  --ff-sticky-bar-h: 56px;      /* barra de filtros e barra de compra fixa */
  --ff-summary-w: 380px;        /* coluna do resumo no carrinho/checkout */

  /* ---------- 8. Forma ---------- */
  --ff-radius-xs: 2px;          /* badges */
  --ff-radius-sm: 4px;          /* botões, campos, chips */
  --ff-radius-md: 8px;          /* cards, painéis, opções de frete/pagamento */
  --ff-radius-lg: 12px;         /* modais, gaveta do carrinho */
  --ff-radius-pill: 999px;      /* chips de filtro, contador do carrinho */
  --ff-border-w: 1px;
  --ff-border-w-strong: 2px;    /* opção selecionada, foco */

  /* ---------- 9. Sombras ---------- */
  --ff-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06);
  --ff-shadow-md: 0 4px 16px rgba(26, 26, 26, 0.08);   /* card no hover, dropdown */
  --ff-shadow-lg: 0 12px 32px rgba(26, 26, 26, 0.12);  /* modal, gaveta, barra fixa */

  /* ---------- 10. Movimento ---------- */
  --ff-ease: cubic-bezier(0.2, 0, 0, 1);
  --ff-dur-fast: 150ms;         /* cor, borda */
  --ff-dur: 250ms;              /* hover de card, dropdown */
  --ff-dur-slow: 350ms;         /* gaveta, modal */

  /* ---------- 11. Camadas ---------- */
  --ff-z-sticky: 100;
  --ff-z-header: 200;
  --ff-z-drawer: 300;
  --ff-z-modal: 400;
  --ff-z-toast: 500;
}

/* ---------- Mobile (≤ 767px) ---------- */
@media (max-width: 767px) {
  :root {
    --ff-fs-display: 32px;  --ff-lh-display: 40px;
    --ff-fs-h1: 26px;       --ff-lh-h1: 34px;
    --ff-fs-h2: 22px;       --ff-lh-h2: 30px;
    --ff-fs-h3: 18px;       --ff-lh-h3: 26px;
    --ff-fs-price-lg: 22px; --ff-lh-price-lg: 28px;
    --ff-gutter: 12px;
    --ff-page-x: 16px;
    --ff-section-y: 40px;
    --ff-header-h: 56px;
  }
}

/* ---------- Temas de seção ----------
   Aplique a classe no container da seção; tudo dentro troca junto. */
.ff-theme-light {                   /* padrão */
  --ff-bg: var(--ff-white);
  --ff-surface: var(--ff-white);
  --ff-text: var(--ff-ink);
  --ff-text-body: var(--ff-gray-800);
  --ff-text-muted: var(--ff-gray-600);
  --ff-border: var(--ff-gray-200);
}
.ff-theme-soft {                    /* seção alternada, barra de filtros, resumo */
  --ff-bg: var(--ff-gray-50);
  --ff-surface: var(--ff-white);
  --ff-text-muted: var(--ff-gray-600);   /* 5.2:1 */
}
.ff-theme-champagne {               /* faixas de campanha, cronômetro, destaque */
  --ff-bg: var(--ff-champagne);
  --ff-surface: var(--ff-champagne-50);
  --ff-text: var(--ff-ink);              /* 13.7:1 */
  --ff-text-body: var(--ff-ink);
  --ff-text-muted: var(--ff-ink);        /* gray-600 cai para 4.4:1 aqui: não usar */
  --ff-border: var(--ff-ink);
  --ff-link-hover: var(--ff-ink);
  --ff-cta-bg: var(--ff-ink);            /* ouro no champagne some: CTA vira ink */
  --ff-cta-text: var(--ff-champagne);
  --ff-cta-bg-hover: var(--ff-gray-800);
}
.ff-theme-ink {                     /* footer, faixa de serviços, barra de aviso */
  --ff-bg: var(--ff-ink);
  --ff-surface: #262522;
  --ff-text: var(--ff-white);            /* 17.4:1 */
  --ff-text-body: var(--ff-champagne-50);
  --ff-text-muted: rgba(255, 255, 255, 0.72);
  --ff-border: rgba(255, 255, 255, 0.16);
  --ff-link: var(--ff-white);
  --ff-link-hover: var(--ff-gold);       /* 6.45:1 */
  --ff-btn-bg: var(--ff-white);
  --ff-btn-text: var(--ff-ink);
  --ff-btn-bg-hover: var(--ff-champagne);
  --ff-focus: var(--ff-gold);
}

/* ---------- Base mínima ---------- */
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--ff-bg);
  color: var(--ff-text-body);
  font-family: var(--ff-font-body);
  font-size: var(--ff-fs-md);
  line-height: var(--ff-lh-md);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--ff-font-display); font-weight: var(--ff-fw-regular); color: var(--ff-text); margin: 0; }
h1 { font-size: var(--ff-fs-h1); line-height: var(--ff-lh-h1); }
h2 { font-size: var(--ff-fs-h2); line-height: var(--ff-lh-h2); }
h3 { font-size: var(--ff-fs-h3); line-height: var(--ff-lh-h3); }
a { color: var(--ff-link); transition: color var(--ff-dur-fast) var(--ff-ease); }
a:hover { color: var(--ff-link-hover); }
:focus-visible { outline: var(--ff-border-w-strong) solid var(--ff-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}