/*
Theme Name:  Ikhlas Masjid
Theme URI:   https://ikhlasmasjid.co.uk
Author:      Ikhlas Masjid
Author URI:  https://ikhlasmasjid.co.uk
Description: A modern, professional Islamic website theme for Ikhlas Masjid, Manchester. Features prayer times, events, news, calendar, and donation functionality.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ikhlas-masjid
Tags:        islamic, masjid, mosque, prayer-times, events, responsive, accessibility-ready, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, theme-options, translation-ready
*/

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
:root {
  /* Brand Colors */
  --color-primary:        #1a6b3a;
  --color-primary-dark:   #0d3b1e;
  --color-primary-light:  #2e8b57;
  --color-primary-xlight: #4caf78;
  --color-secondary:      #c8960c;
  --color-secondary-dark: #9a710a;
  --color-secondary-light:#e8b831;
  --color-accent:         #e8f5e9;

  /* Neutral Colors */
  --color-white:      #ffffff;
  --color-off-white:  #faf8f4;
  --color-light-bg:   #f4efe6;
  --color-border:     #e2ddd4;
  --color-text:       #1c1c1c;
  --color-text-muted: #6b6b6b;
  --color-text-light: #9a9a9a;
  --color-dark:       #0a0a0a;
  --color-overlay:    rgba(13, 59, 30, 0.78);

  /* Typography */
  --font-heading: 'Playfair Display', 'Georgia', serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-arabic:  'Amiri', 'Scheherazade New', 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;

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.06);
  --shadow-xl:  0 20px 50px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.08);
  --shadow-gold:0 4px 20px rgba(200, 150, 12, 0.25);

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

  /* Layout */
  --container-max: 1280px;
  --container-xl:  1440px;
  --nav-height:    80px;
}