/* =========================================================================
   Fecane Child Foundation — Design Tokens
   Converted from the original Lovable oklch palette to sRGB hex so colors
   render on every browser (oklch / color-mix need very recent browsers).
   The -rgb triplets feed the translucent utilities (e.g. bg-primary/10).
   ========================================================================= */

:root {
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);

  --background: #ffffff;
  --background-rgb: 255, 255, 255;
  --foreground: #0a140f;
  --foreground-rgb: 10, 20, 15;
  --card: #ffffff;
  --card-foreground: #0a140f;
  --popover: #ffffff;
  --popover-foreground: #0a140f;
  --primary: #007f4e;
  --primary-rgb: 0, 127, 78;
  --primary-foreground: #f9fdfb;
  --primary-foreground-rgb: 249, 253, 251;
  --primary-glow: #00a062;
  --secondary: #f2823b;
  --secondary-rgb: 242, 130, 59;
  --secondary-foreground: #fffbf9;
  --muted: #ecf4ef;
  --muted-rgb: 236, 244, 239;
  --muted-foreground: #4c5951;
  --muted-foreground-rgb: 76, 89, 81;
  --accent: #fdecd1;
  --accent-foreground: #062919;
  --whatsapp: #399e43;
  --whatsapp-foreground: #fafdfa;
  --gradient-hero: linear-gradient(135deg, rgba(0, 127, 78, 0.85), rgba(6, 41, 25, 0.75));
  --shadow-warm: 0 20px 60px -20px rgba(0, 127, 78, 0.35);
  --destructive: #e7000b;
  --destructive-foreground: #f8fafc;
  --border: #dfe7e2;
  --input: #dfe7e2;
  --ring: #007f4e;
  --chart-1: #f54900;
  --chart-2: #009689;
  --chart-3: #104e64;
  --chart-4: #ffb900;
  --chart-5: #fe9a00;

  /* Convenience aliases used by Elementor global color picker mapping */
  --e-global-color-primary: var(--primary);
  --e-global-color-secondary: var(--secondary);
  --e-global-color-text: var(--foreground);
  --e-global-color-accent: var(--accent);
}

.dark {
  --background: #020618;
  --background-rgb: 2, 6, 24;
  --foreground: #f8fafc;
  --foreground-rgb: 248, 250, 252;
  --card: #0f172b;
  --card-foreground: #f8fafc;
  --popover: #0f172b;
  --popover-foreground: #f8fafc;
  --primary: #e2e8f0;
  --primary-rgb: 226, 232, 240;
  --primary-foreground: #0f172b;
  --primary-foreground-rgb: 15, 23, 43;
  --secondary: #1d293d;
  --secondary-rgb: 29, 41, 61;
  --secondary-foreground: #f8fafc;
  --muted: #1d293d;
  --muted-rgb: 29, 41, 61;
  --muted-foreground: #90a1b9;
  --muted-foreground-rgb: 144, 161, 185;
  --accent: #1d293d;
  --accent-foreground: #f8fafc;
  --destructive: #ff6467;
  --destructive-foreground: #f8fafc;
  --border: rgba(255, 255, 255, 0.1);
  --input: rgba(255, 255, 255, 0.15);
  --ring: #6a7282;
}