/* =====================================================================
   Dozeria — Design tokens
   Extraídos do material oficial da marca e do canvas de design.
   Ver docs/DESIGN_SYSTEM.md
   ===================================================================== */

:root {
  /* ---------- cacau (texto, bordas, ação) ---------- */
  --dz-cocoa-950: #2E1A10;   /* fundo profundo: sidebar, marquee, CTA, rodapé */
  --dz-cocoa-900: #3B2317;
  --dz-cocoa-800: #4A2E1F;
  --dz-cocoa-700: #5A3A28;
  --dz-cocoa-600: #6E4A34;
  --dz-cocoa-400: #9C7A63;
  --dz-cocoa-300: #BFA48F;
  --dz-cocoa-200: #D9C6B6;
  --dz-cocoa-100: #EDE0D4;
  --dz-cocoa-50:  #E7D9CB;   /* linha sobre papel: mais quente que a 100 */

  /* ---------- creme (papel, superfícies) ---------- */
  --dz-cream-50:  #FFFDF9;
  --dz-cream-100: #FDF8F0;
  --dz-cream-200: #F7EFE3;
  --dz-sand-300:  #EFE2CF;

  /* ---------- azul-bebê (selo, preço, dados) ---------- */
  --dz-blue-100: #EEF4FC;
  --dz-blue-200: #DCE8F7;
  --dz-blue-300: #C6D9EF;
  --dz-blue-400: #A8C4E4;
  --dz-blue-600: #6E93C0;
  --dz-blue-800: #3F5F87;

  /* ---------- rosa (afeto) ---------- */
  --dz-rose-300: #F2B8BC;
  --dz-rose-400: #E79AA0;
  --dz-rose-600: #C9727A;   /* o rosa da marca: decoração, nunca texto */
  --dz-rose-700: #B85A63;   /* texto grande sobre creme — 3,9:1 */
  --dz-rose-800: #8E3F47;   /* texto pequeno sobre o rosa claro — 6,3:1 */

  /* ---------- verde (vegano) ---------- */
  --dz-leaf-700: #4F6B3D;
  --dz-leaf-500: #6E8B5A;
  --dz-leaf-100: #EAF1E3;

  /* ---------- WhatsApp ---------- */
  --dz-whats-500: #25D366;
  --dz-whats-ink: #0B3D22;   /* texto sobre o verde: 8.1:1 */
  --dz-whats-700: #128C7E;

  /* ---------- papéis semânticos ---------- */
  --dz-bg: var(--dz-cream-100);
  --dz-bg-deep: var(--dz-cocoa-950);
  --dz-surface: var(--dz-cream-50);
  --dz-surface-alt: var(--dz-cream-200);
  --dz-surface-blue: var(--dz-blue-100);
  --dz-text: var(--dz-cocoa-900);
  --dz-text-muted: var(--dz-cocoa-600);
  --dz-text-subtle: #7E5C46;
  --dz-text-invert: var(--dz-cream-100);
  --dz-border: var(--dz-cocoa-50);
  --dz-border-strong: var(--dz-cocoa-200);
  --dz-border-soft: var(--dz-cocoa-100);
  --dz-primary: var(--dz-cocoa-800);
  --dz-primary-hover: var(--dz-cocoa-700);
  --dz-accent: var(--dz-blue-300);
  --dz-accent-soft: var(--dz-blue-200);
  --dz-heart: var(--dz-rose-400);
  /* Anel de foco: azul escuro (6,6:1 no branco, ≥ 3:1 nos cards azuis) — o 600 dava 2,57:1 no card (A11Y-01). */
  --dz-focus: var(--dz-blue-800);

  --dz-success: #4F7A3D;
  --dz-success-soft: #E9F1E3;
  --dz-success-ink: #3B5E2D;
  --dz-warning: #B07A22;
  --dz-warning-soft: #FBF1DD;
  --dz-warning-line: #F0DDB5;
  --dz-warning-ink: #5E3F0C;
  --dz-danger: #A5452F;
  --dz-danger-soft: #FAE8E3;
  --dz-danger-ink: #8A3622;
  --dz-info: var(--dz-blue-600);
  --dz-info-soft: var(--dz-blue-100);

  /* ---------- tipografia ----------
     Três vozes, cada uma com um trabalho:
       display  títulos e números grandes (o tom "confeitaria fina")
       script   a assinatura manuscrita, nunca em bloco de texto
       ui       todo o resto — interface E corpo de texto

     A UI é Instrument Sans: tem o desenho humanista que combina com a
     Playfair sem competir. Corpo e interface na MESMA família de propósito:
     a serifa de leitura que existia antes brigava com a display. */
  --dz-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --dz-font-script: "Parisienne", "Segoe Script", "Brush Script MT", cursive;
  --dz-font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dz-font-body: var(--dz-font-ui);

  /* Escala fluida. Os extremos são os do canvas: no celular o hero tem 42px,
     no desktop 104px — por isso o clamp é largo e o meio é vw puro. */
  --dz-fs-hero: clamp(2.625rem, 7.4vw, 5.75rem);
  --dz-fs-script: clamp(2rem, 3.8vw, 3.375rem);
  --dz-fs-display: clamp(2rem, 5.4vw, 4.75rem);
  --dz-fs-h2: clamp(1.5rem, 3vw, 2.25rem);
  --dz-fs-h3: clamp(1.25rem, 2vw, 1.625rem);
  --dz-fs-lg: 1.0625rem;
  --dz-fs-base: 0.9375rem;
  --dz-fs-sm: 0.8125rem;
  --dz-fs-xs: 0.6875rem;

  --dz-lh-tight: 1.02;
  --dz-lh-snug: 1.3;
  --dz-lh-base: 1.6;

  --dz-ls-label: 0.18em;
  --dz-ls-caps: 0.06em;
  --dz-ls-tight: -0.02em;

  /* ---------- espaçamento (base 4px) ---------- */
  --dz-1: 4px;
  --dz-2: 8px;
  --dz-3: 12px;
  --dz-4: 16px;
  --dz-5: 20px;
  --dz-6: 24px;
  --dz-7: 28px;
  --dz-8: 32px;
  --dz-10: 40px;
  --dz-12: 48px;
  --dz-14: 56px;
  --dz-16: 64px;
  --dz-20: 80px;
  --dz-28: 112px;

  /* ---------- raio ----------
     O canvas usa raios grandes e generosos: quanto maior a superfície,
     mais arredondada. Pílula em tudo que é clicável e curto. */
  --dz-r-sm: 8px;
  --dz-r-md: 14px;
  --dz-r-lg: 18px;
  --dz-r-xl: 22px;
  --dz-r-2xl: 28px;
  --dz-r-3xl: 36px;
  --dz-r-4xl: 48px;
  --dz-r-pill: 999px;

  /* ---------- sombra (sempre quente, nunca cinza) ---------- */
  --dz-shadow-sm: 0 1px 2px rgba(59, 35, 23, .06);
  --dz-shadow-md: 0 2px 8px rgba(59, 35, 23, .08);
  --dz-shadow-lg: 0 8px 24px rgba(59, 35, 23, .10);
  --dz-shadow-up: 0 -2px 12px rgba(59, 35, 23, .10);
  --dz-shadow-btn: 0 14px 30px -14px rgba(59, 35, 23, .6);
  --dz-shadow-card: 0 40px 70px -40px rgba(59, 35, 23, .45);
  --dz-shadow-pop: 0 24px 50px -24px rgba(59, 35, 23, .4);

  /* ---------- movimento ---------- */
  --dz-ease: cubic-bezier(.2, .8, .2, 1);
  --dz-dur-1: 120ms;
  --dz-dur-2: 200ms;
  --dz-dur-3: 350ms;
  --dz-dur-4: 550ms;

  /* ---------- layout ---------- */
  --dz-container: 1280px;
  --dz-gutter: 16px;
  --dz-appbar-h: 68px;
  --dz-cartbar-h: 80px;
  --dz-sidebar-w: 264px;
  --dz-tap: 44px;
  --dz-btn-h: 56px;
  --dz-btn-h-sm: 48px;

  /* ---------- z-index ---------- */
  --dz-z-appbar: 60;
  --dz-z-cartbar: 65;
  --dz-z-overlay: 80;
  --dz-z-sheet: 85;
  --dz-z-toast: 95;
}

@media (min-width: 640px) {
  :root {
    --dz-gutter: 20px;
  }
}

@media (min-width: 900px) {
  :root {
    --dz-gutter: 40px;
    --dz-appbar-h: 96px;
    --dz-btn-h: 60px;
  }
}

@media (min-width: 1280px) {
  :root {
    --dz-gutter: 80px;
  }
}