/* ==========================================================================
   VARIABLES.CSS
   Design tokens: colors, shadows, typography, spacing.
   Equivalent to the old `tailwind.config` — kept in one place so the whole
   site can be re-themed by editing only this file.
   ========================================================================== */

:root {
  /* Colors */
  --color-brand-light: #FDFBF7;   /* warm, breathable background */
  --color-brand-dark: #2C1E16;    /* deep warm espresso for text */
  --color-brand-accent: #D96C4A;  /* warm terracotta accent — used for icons/buttons/fills, untouched */
  --color-brand-accent-hover: #BF593B;
  --color-brand-card: #FFFFFF;
  --color-brand-whatsapp: #25D366;
  --color-brand-whatsapp-hover: #20BA56;

  /* Text-only accent tones: same terracotta family, darkened just enough to stay
     readable (>=4.5:1 on white) when the accent color is used as small text
     (labels, links) rather than as an icon or a button fill. */
  --color-brand-accent-text: #AD4A30;
  --color-brand-accent-text-hover: #96401F;

  /* Text hierarchy tokens (dark text on light backgrounds only). One scale,
     reused everywhere, so weight/opacity mean the same thing across the site. */
  --text-heading: var(--color-brand-dark);       /* titles: full opacity + heavier weight */
  --text-body: rgba(44, 30, 22, 0.85);           /* paragraphs / descriptions */
  --text-secondary: rgba(44, 30, 22, 0.7);       /* meta info, subtitles, secondary labels */

  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;

  /* Resource icon accent colors */
  --color-resource-red-bg: #FFE5E5;
  --color-resource-red-fg: #FF4757;
  --color-resource-blue-bg: #E5F4FF;
  --color-resource-blue-fg: #1E90FF;
  --color-resource-orange-bg: #FFF4E5;
  --color-resource-orange-fg: #FFA502;

  /* Typography */
  --font-serif: 'Lora', serif;
  --font-sans: 'Plus Jakarta Sans', sans-serif;

  /* Shadows */
  --shadow-soft: 0 10px 40px -10px rgba(44, 30, 22, 0.08);
  --shadow-float: 0 20px 50px -20px rgba(217, 108, 74, 0.15);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-lg-whatsapp: 0 10px 15px -3px rgba(34, 197, 94, 0.2), 0 4px 6px -4px rgba(34, 197, 94, 0.2);
  --shadow-lg-accent: 0 10px 15px -3px rgba(217, 108, 74, 0.3), 0 4px 6px -4px rgba(217, 108, 74, 0.3);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-whatsapp-float: 0 10px 30px -5px rgba(37, 211, 102, 0.5);

  /* Layout */
  --container-max-width: 32rem; /* Tailwind's max-w-lg */
}