@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=DM+Sans:wght@400;500;600;700;800;900&display=swap');

:root {
  --color-bg: #F7F5EF;
  --color-bg-soft: #ECE8DC;
  --color-surface: #FFFFFF;
  --color-surface-soft: #FCFBF7;
  --color-text: #171717;
  --color-muted: #62676B;
  --color-heading: #0A0905;
  --color-line: rgba(10, 9, 5, 0.12);
  --color-soft-line: rgba(240, 237, 223, 0.14);
  --color-primary: #0A0905;
  --color-primary-soft: #16140E;
  --color-primary-text: #FFFFFF;
  --color-accent: #C79B3C;
  --color-accent-dark: #7A5A18;
  --color-accent-text: #111111;
  --public-primary-bg: var(--color-primary);
  --public-primary-text: var(--color-primary-text);
  --public-secondary-bg: var(--color-accent);
  --public-secondary-text: var(--color-accent-text);
  --public-outline-bg: rgba(255, 255, 255, 0.94);
  --public-outline-text: #111111;
  --public-disabled-bg: #D9DEE7;
  --public-disabled-text: #243040;
  --public-whatsapp-bg: #14643F;
  --public-whatsapp-text: #FFFFFF;
  --color-success: #24A86B;
  --color-success-text: #14643F;
  --color-danger: #D94A4A;
  --color-danger-text: #9C2525;
  --color-info: #2F80ED;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --shadow-sm: 0 8px 22px rgba(10, 9, 5, 0.07);
  --shadow-md: 0 14px 34px rgba(10, 9, 5, 0.08);
  --shadow-lg: 0 18px 50px rgba(10, 9, 5, 0.10);
  --font-sans: "DM Sans", Arial, sans-serif;
  --font-display: "Permanent Marker", cursive;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 56px;
  --focus-ring: 0 0 0 4px rgba(199, 155, 60, 0.22);
  --shadow-hover: 0 20px 44px rgba(10, 9, 5, 0.14);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.15s var(--ease-out);
  --transition-base: 0.22s var(--ease-out);
  --radius-pill: 999px;
  --color-success-bg: rgba(36, 168, 107, 0.13);
  --color-danger-bg: rgba(217, 74, 74, 0.12);
  --color-accent-bg: rgba(199, 155, 60, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}