/* ============================================================
   PANIFICADORA PÃO DOURADO — DESIGN TOKENS
   Identidade visual: padaria artesanal premium e apetitosa.
   Paleta quente (crosta de pão, caramelo, café, creme) + acento verde-trigo.
   Suporte a tema CLARO (padrão) e ESCURO via [data-theme] e prefers-color-scheme.
   ------------------------------------------------------------
   Regra de ouro: todo valor de cor nasce como token aqui.
   Nunca usar hex solto no HTML/CSS — sempre var(--pd-*).
   ============================================================ */

:root {
  /* ---------- CORES DE MARCA (fixas nos dois temas) ---------- */
  --pd-brand-crust:      #C8873E; /* crosta de pão / âmbar — cor primária  */
  --pd-brand-caramel:    #6B3F1D; /* caramelo escuro — secundária          */
  --pd-brand-coffee:     #2A1A0F; /* café profundo — base escura           */
  --pd-brand-cream:      #FBF3E4; /* creme — base clara                     */
  --pd-brand-wheat:      #6B8E4E; /* verde-trigo — acento natural          */

  /* Variações derivadas (tons de apoio para hover/gradientes) */
  --pd-crust-600:        #B4762E; /* âmbar mais fechado (hover)             */
  --pd-crust-300:        #E0A860; /* âmbar claro / brilho                   */
  --pd-caramel-300:      #9A6636; /* caramelo suavizado                     */
  --pd-wheat-600:        #567A3C; /* verde-trigo escuro (hover)             */
  --pd-wheat-200:        #9CB77E; /* verde-trigo claro                      */

  /* ---------- NEUTROS COM VIÉS QUENTE ---------- */
  --pd-warm-50:          #FDF9F1;
  --pd-warm-100:         #F7EEDD;
  --pd-warm-200:         #EFE0C7;
  --pd-warm-300:         #E1CBA6;
  --pd-warm-400:         #C4A878;
  --pd-warm-500:         #9A7E52;
  --pd-warm-600:         #6E5637;
  --pd-warm-700:         #4A3826;
  --pd-warm-800:         #30231663;
  --pd-warm-900:         #241710;

  /* ============================================================
     TEMA CLARO (padrão) — mapeamento semântico
     ============================================================ */

  /* Superfícies / fundos */
  --pd-bg:               var(--pd-brand-cream);   /* fundo principal        */
  --pd-bg-soft:          #FFFCF6;                 /* fundo levemente + claro */
  --pd-surface:          #FFFFFF;                 /* cartões, painéis        */
  --pd-surface-2:        var(--pd-warm-100);      /* superfície alternativa  */
  --pd-surface-inset:    var(--pd-warm-50);       /* campos, poços           */

  /* Texto */
  --pd-text:             var(--pd-brand-coffee);  /* texto principal         */
  --pd-text-soft:        var(--pd-warm-600);      /* texto secundário        */
  --pd-text-muted:       var(--pd-warm-500);      /* legendas / apoio        */
  --pd-text-on-brand:    var(--pd-brand-cream);   /* texto sobre âmbar/café   */

  /* Marca aplicada */
  --pd-primary:          var(--pd-brand-crust);
  --pd-primary-hover:    var(--pd-crust-600);
  --pd-primary-contrast: #FFFFFF;
  --pd-accent:           var(--pd-brand-wheat);
  --pd-accent-hover:     var(--pd-wheat-600);

  /* Bordas e linhas */
  --pd-border:           var(--pd-warm-200);
  --pd-border-strong:    var(--pd-warm-300);
  --pd-divider:          rgba(42, 26, 15, 0.10);

  /* Efeitos */
  --pd-ring:             rgba(200, 135, 62, 0.45);      /* foco             */
  --pd-shadow-color:     42 26 15;                       /* café em rgb p/ sombra */
  --pd-shadow-sm:        0 1px 2px rgba(var(--pd-shadow-color) / 0.08);
  --pd-shadow-md:        0 8px 24px -8px rgba(var(--pd-shadow-color) / 0.18);
  --pd-shadow-lg:        0 24px 60px -20px rgba(var(--pd-shadow-color) / 0.28);
  --pd-overlay:          rgba(42, 26, 15, 0.55);

  /* Gradientes de assinatura */
  --pd-grad-crust:       linear-gradient(135deg, var(--pd-crust-300) 0%, var(--pd-brand-crust) 45%, var(--pd-caramel-300) 100%);
  --pd-grad-hero:        radial-gradient(120% 120% at 15% 10%, #FFF7EA 0%, var(--pd-brand-cream) 40%, #F3E4CB 100%);
  --pd-grad-dark:        linear-gradient(160deg, #3A2718 0%, var(--pd-brand-coffee) 100%);

  /* ---------- TIPOGRAFIA ---------- */
  --pd-font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --pd-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala tipográfica fluida (clamp) */
  --pd-fs-hero:   clamp(2.75rem, 6vw + 1rem, 5.5rem);
  --pd-fs-h1:     clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --pd-fs-h2:     clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  --pd-fs-h3:     clamp(1.25rem, 1.2vw + 1rem, 1.6rem);
  --pd-fs-lead:   clamp(1.05rem, 0.6vw + 1rem, 1.3rem);
  --pd-fs-body:   1rem;
  --pd-fs-small:  0.875rem;

  /* ---------- ESPAÇO / RAIO / TRANSIÇÃO ---------- */
  --pd-radius-sm:  8px;
  --pd-radius-md:  16px;
  --pd-radius-lg:  28px;
  --pd-radius-xl:  40px;
  --pd-radius-pill: 999px;

  --pd-ease:        cubic-bezier(0.22, 1, 0.36, 1);   /* saída suave        */
  --pd-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pd-dur-fast:    180ms;
  --pd-dur:         360ms;
  --pd-dur-slow:    720ms;

  --pd-maxw:        1200px;   /* largura máxima do conteúdo */

  color-scheme: light;
}

/* ============================================================
   TEMA ESCURO — via atributo explícito [data-theme="dark"]
   ============================================================ */
:root[data-theme="dark"] {
  --pd-bg:               var(--pd-brand-coffee);
  --pd-bg-soft:          #33200F;
  --pd-surface:          #3A2718;
  --pd-surface-2:        #46301F;
  --pd-surface-inset:    #2F1E11;

  --pd-text:             var(--pd-brand-cream);
  --pd-text-soft:        var(--pd-warm-300);
  --pd-text-muted:       var(--pd-warm-400);
  --pd-text-on-brand:    var(--pd-brand-coffee);

  --pd-primary:          var(--pd-crust-300);
  --pd-primary-hover:    var(--pd-brand-crust);
  --pd-primary-contrast: #2A1A0F;
  --pd-accent:           var(--pd-wheat-200);
  --pd-accent-hover:     var(--pd-brand-wheat);

  --pd-border:           rgba(251, 243, 228, 0.12);
  --pd-border-strong:    rgba(251, 243, 228, 0.22);
  --pd-divider:          rgba(251, 243, 228, 0.10);

  --pd-ring:             rgba(224, 168, 96, 0.55);
  --pd-shadow-color:     0 0 0;
  --pd-shadow-sm:        0 1px 2px rgba(0,0,0,0.30);
  --pd-shadow-md:        0 10px 30px -10px rgba(0,0,0,0.55);
  --pd-shadow-lg:        0 30px 70px -24px rgba(0,0,0,0.65);
  --pd-overlay:          rgba(0, 0, 0, 0.60);

  --pd-grad-crust:       linear-gradient(135deg, var(--pd-brand-crust) 0%, var(--pd-caramel-300) 100%);
  --pd-grad-hero:        radial-gradient(120% 120% at 15% 10%, #40291700 0%, var(--pd-brand-coffee) 55%, #1C1109 100%);
  --pd-grad-dark:        linear-gradient(160deg, #46301F 0%, var(--pd-brand-coffee) 100%);

  color-scheme: dark;
}

/* ============================================================
   TEMA ESCURO — respeitando preferência do sistema
   (só quando o usuário NÃO forçou o tema claro manualmente)
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --pd-bg:               var(--pd-brand-coffee);
    --pd-bg-soft:          #33200F;
    --pd-surface:          #3A2718;
    --pd-surface-2:        #46301F;
    --pd-surface-inset:    #2F1E11;

    --pd-text:             var(--pd-brand-cream);
    --pd-text-soft:        var(--pd-warm-300);
    --pd-text-muted:       var(--pd-warm-400);
    --pd-text-on-brand:    var(--pd-brand-coffee);

    --pd-primary:          var(--pd-crust-300);
    --pd-primary-hover:    var(--pd-brand-crust);
    --pd-primary-contrast: #2A1A0F;
    --pd-accent:           var(--pd-wheat-200);
    --pd-accent-hover:     var(--pd-brand-wheat);

    --pd-border:           rgba(251, 243, 228, 0.12);
    --pd-border-strong:    rgba(251, 243, 228, 0.22);
    --pd-divider:          rgba(251, 243, 228, 0.10);

    --pd-ring:             rgba(224, 168, 96, 0.55);
    --pd-shadow-color:     0 0 0;
    --pd-shadow-sm:        0 1px 2px rgba(0,0,0,0.30);
    --pd-shadow-md:        0 10px 30px -10px rgba(0,0,0,0.55);
    --pd-shadow-lg:        0 30px 70px -24px rgba(0,0,0,0.65);
    --pd-overlay:          rgba(0, 0, 0, 0.60);

    --pd-grad-crust:       linear-gradient(135deg, var(--pd-brand-crust) 0%, var(--pd-caramel-300) 100%);
    --pd-grad-hero:        radial-gradient(120% 120% at 15% 10%, #40291700 0%, var(--pd-brand-coffee) 55%, #1C1109 100%);
    --pd-grad-dark:        linear-gradient(160deg, #46301F 0%, var(--pd-brand-coffee) 100%);

    color-scheme: dark;
  }
}