/* ==========================================================================
   My Dorama Café — Design Tokens
   Paleta extraída do logotipo oficial (verde-oliva + amarelo do guarda-chuva)
   ========================================================================== */
:root {
  /* Cores da marca (logo) */
  --color-green-900: #303c2b;
  --color-green-700: #445938;
  --color-green-600: #4f6449;
  --color-green-500: #64795c;
  --color-mustard-600: #c99a2e;
  --color-mustard-500: #ddae3e;
  --color-mustard-300: #ecc773;
  --color-mustard-100: #f7e4ba;
  --color-brown-900: #2a1b12;
  --color-teal-700: #2e4c49;

  /* Neutros / base */
  --color-cream: #f7f3e8;
  --color-cream-soft: #fbf9f2;
  --color-white: #ffffff;

  /* Pasteis complementares (uso restrito: fundos secundários / hover) */
  --color-pastel-pink: #f6dbe0;
  --color-pastel-yellow: #faeecb;
  --color-pastel-beige: #efe6d3;

  /* Motivo decorativo: ramo de flor de cerejeira */
  --color-blossom: #f0b3c4;
  --color-branch: #6b4636;

  /* Papéis semânticos */
  --color-bg: var(--color-cream);
  --color-bg-alt: var(--color-cream-soft);
  --color-text: var(--color-brown-900);
  --color-text-soft: #5a4a3d;
  --color-primary: var(--color-green-600);
  --color-primary-dark: var(--color-green-900);
  --color-accent: var(--color-mustard-500);
  --color-accent-dark: var(--color-mustard-600);
  --color-surface: var(--color-white);
  --color-border: rgba(42, 27, 18, 0.1);

  /* Tipografia */
  --font-heading: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Espaçamento em escala */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  /* Forma e profundidade */
  --radius-sm: 0.75rem;
  --radius-md: 1.5rem;
  --radius-lg: 2.5rem;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 14px rgba(42, 27, 18, 0.08);
  --shadow-md: 0 12px 32px rgba(42, 27, 18, 0.12);
  --shadow-lg: 0 24px 60px rgba(42, 27, 18, 0.18);
  --shadow-glass: 0 8px 32px rgba(48, 60, 43, 0.1);

  /* Movimento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.45s;
  --dur-slow: 0.8s;

  --container-w: 1180px;
  --header-h: 84px;
}