/*
Theme Name: ICOSF Theme
Theme URI: https://icosf.org
Author: Rawdah by Fammuk
Author URI: https://myrawdah.com
Description: Custom WordPress theme for the Islamic Center of South Florida — a 501(c)(3) nonprofit masjid in Pompano Beach, FL with 8,000+ members. Features Rawdah platform widget integration, copper/rose-gold design palette, and modern animations.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: icosf
Tags: custom-menu, custom-logo, featured-images, translation-ready, accessibility-ready

Islamic Center of South Florida
1641 NW 15th Street, Pompano Beach, FL 33069
*/

:root {
  /* Primary — Copper/Rose-Gold */
  --color-primary: #8B5E3C;
  --color-primary-light: #B8866A;
  --color-primary-dark: #5C3A24;
  --color-primary-metallic: linear-gradient(135deg, #B8866A, #8B5E3C, #D4A574);

  /* Green Accent */
  --color-green: #2E7D32;
  --color-green-light: #4CAF50;
  --color-green-dark: #1B5E20;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-off-white: #FAF8F5;
  --color-cream: #F5F0EA;
  --color-gray-100: #F0ECE6;
  --color-gray-200: #E0D8CE;
  --color-gray-300: #C4B8A8;
  --color-gray-500: #8A7E72;
  --color-gray-700: #4A4039;
  --color-gray-900: #1A1410;
  --color-black: #0D0A07;

  /* Text */
  --color-text: #1A1410;
  --color-text-light: #4A4039;
  --color-text-muted: #8A7E72;

  /* Links */
  --color-link: #8B5E3C;
  --color-link-hover: #5C3A24;

  /* CTA */
  --color-cta: #C17A3A;
  --color-cta-hover: #A86428;

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-arabic: 'Amiri', 'Noto Naskh Arabic', serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Layout */
  --container-max: 1280px;
  --container-wide: 1440px;
  --header-height: 100px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(26, 20, 16, 0.06);
  --shadow-md: 0 4px 12px rgba(26, 20, 16, 0.08);
  --shadow-lg: 0 8px 24px rgba(26, 20, 16, 0.12);
  --shadow-xl: 0 16px 48px rgba(26, 20, 16, 0.16);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}