/**
 * Emmanuel Miami Theme - Design System Variables
 * Version: 1.0.10
 * 
 * Global CSS variables for consistent design across the entire site
 */

:root {
  /* ==========================================================================
     TYPOGRAPHY - Font Families
     ========================================================================== */

  --font-heading: "Big Shoulders Display", sans-serif;
  --font-heading-inline: "Big Shoulders Inline Display", sans-serif;
  --font-body: "EB Garamond", serif;
  --font-ui: "Outfit", sans-serif;

  /* ==========================================================================
     TYPOGRAPHY - Font Weights
     ========================================================================== */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* ==========================================================================
     TYPOGRAPHY - Font Sizes (Modular Scale - Perfect Fourth 1.333)
     ========================================================================== */

  /* Small Sizes */
  --font-size-xs: 0.75rem; /* 12px - captions, fine print */
  --font-size-sm: 0.875rem; /* 14px - small UI elements */
  --font-size-md: 1rem; /* 16px - standard UI, small body */

  /* Base Body */
  --font-size-base: 1.125rem; /* 18px - main body text */

  /* Large Sizes */
  --font-size-lg: 1.25rem; /* 20px - large body, subtitles */
  --font-size-xl: 1.5rem; /* 24px - h5, h6, large UI */

  /* Headings */
  --font-size-2xl: 2rem; /* 32px - h4 */
  --font-size-3xl: 2.5rem; /* 40px - h3 */
  --font-size-4xl: 3rem; /* 48px - h2 */
  --font-size-5xl: 3.75rem; /* 60px - h1 */

  /* Display/Hero */
  --font-size-6xl: 4.5rem; /* 72px - hero sections */

  /* ==========================================================================
     TYPOGRAPHY - Line Heights
     ========================================================================== */

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ==========================================================================
     COLORS - Brand Colors
     ========================================================================== */

  /* Primary Colors */
  --color-primary: #292746; /* Navy/Purple */
  --color-primary-purple: #292746; /* Legacy support */

  /* Secondary Colors */
  --color-secondary: #ff914d; /* Orange */
  --color-secondary-orange: #ff914d; /* Legacy support */

  /* Accent Colors */
  --color-accent: #2db3bb; /* Teal */
  --color-accent-alt: #2db3bb; /* Standardized to brand teal */
  --color-secondary-teal: #2db3bb; /* Legacy support */

  /* Tertiary Colors */
  --color-tertiary: #292746; /* Standardized to navy */
  --color-tertiary-red: #292746; /* Standardized to navy */
  --color-tertiary-cyan: #c7fff8; /* Cyan */

  /* ==========================================================================
     COLORS - Neutrals
     ========================================================================== */

  --color-white: #ffffff;
  --color-black: #000000;

  /* Gray Scale - Standardized (Lightest to Darkest) */
  --color-gray-50: #fafafa; /* Lightest background */
  --color-gray-100: #f5f5f5; /* Light background */
  --color-gray-200: #e0e0e0; /* Border light */
  --color-gray-300: #d0d0d0; /* Border medium */
  --color-gray-400: #bdbdbd; /* Border dark */
  --color-gray-500: #999999; /* Disabled text */
  --color-gray-600: #757575; /* Secondary text */
  --color-gray-700: #666666; /* Body text medium */
  --color-gray-800: #424242; /* Body text dark */
  --color-gray-900: #333333; /* Headings, primary text */

  /* Dark Variants */
  --color-navy-dark: #1a1a2e; /* Hero backgrounds */
  --color-navy-darker: #1a1a1a; /* Text accents */

  /* Accent Variants */
  --color-orange-hover: #e67f3d; /* Button hover state */
  --color-teal-light: #4ecdc4; /* Footer link hover */

  /* ==========================================================================
     COLORS - Semantic Colors
     ========================================================================== */

  /* Text */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  --color-text-muted: var(--color-gray-500);
  --color-text-inverse: var(--color-white);
  --color-text-brand: var(--color-primary);

  /* Legacy text color support */
  --color-text-dark: #333;
  --color-text-light: #333333;

  /* Backgrounds */
  --color-bg-body: var(--color-white);
  --color-bg-section: var(--color-gray-50);
  --color-bg-card: var(--color-white);
  --color-bg-footer: var(--color-primary);
  --color-bg-overlay: rgba(0, 0, 0, 0.5);

  /* Legacy background color support */
  --color-bg-light: #fff;
  --color-bg-gray: #f5f5f5;

  /* Borders */
  --color-border-light: var(--color-gray-200);
  --color-border-medium: var(--color-gray-300);
  --color-border-dark: var(--color-gray-500);

  /* Interactive States */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-accent);

  /* Buttons */
  --color-button-primary-bg: var(--color-secondary);
  --color-button-primary-text: var(--color-white);
  --color-button-secondary-bg: var(--color-accent);
  --color-button-secondary-text: var(--color-white);

  /* Status/Feedback */
  --color-success: #4caf50; /* Green for success states */
  --color-warning: #ff9800; /* Amber for warnings */
  --color-error: #d32f2f; /* Red for errors */
  --color-info: var(--color-accent); /* Teal for info */

  /* ==========================================================================
     COLORS - Extended Palette (Template-Specific)
     ========================================================================== */

  /* Extended Light Backgrounds */
  --color-gray-lightest: #f8f9fa; /* Very light backgrounds (about, watch-live) */
  --color-gray-admin: #f9f9f9; /* Admin meta box backgrounds */
  --color-gray-alt: #f8f8f8; /* Alternate light background (ministries) */
  --color-gray-neutral: #f0f0f0; /* Neutral light background */
  --color-gray-purple-tint: #e8e8f0; /* Purple-tinted backgrounds (about, ministries) */
  --color-gray-blue-tint: #e9ecef; /* Blue-tinted backgrounds (components) */
  --color-gray-mission: #e8e9eb; /* Mission template backgrounds */

  /* Extended Borders */
  --color-border-default: #ddd; /* Common border color (very frequent) */
  --color-border-alt: #dee2e6; /* Alternate border color */

  /* Extended Text Grays */
  --color-text-medium: #555; /* Medium text (between gray-600 and gray-700) */
  --color-text-disabled: #ccc; /* Disabled/placeholder text */

  /* Watch Live Page Colors (Tailwind-inspired) */
  --color-slate-50: #fafbfc; /* Watch live backgrounds */
  --color-slate-100: #f9fafb; /* Watch live UI light */
  --color-slate-200: #f3f4f6; /* Watch live UI medium */
  --color-slate-300: #e5e7eb; /* Watch live borders/dividers */
  --color-slate-700: #374151; /* Watch live text dark */
  --color-slate-500: #6b7280; /* Watch live text medium */
  --color-slate-400: #9ca3af; /* Watch live text light */

  /* Additional Dark Purples (Gradients/Hero) */
  --color-navy-gradient: #2d3f52; /* Sermon/watch hero gradient */
  --color-navy-medium: #2f2d4f; /* Ministry archive hero */
  --color-navy-deeper: #1e1a30; /* Deep purple backgrounds (mission, music) */
  --color-navy-deepest: #1f1d35; /* Deepest purple (about) */
  --color-purple-gradient: #1a1730; /* Leadership gradient */
  --color-purple-medium: #6b5b95; /* Music gradient accent */

  /* Special Purpose Colors */
  --color-danger: #dc3232; /* Admin remove buttons, critical errors */
  --color-success-alt: #10b981; /* Watch live success green */
  --color-education-blue: #87ceeb; /* Education ministry accent */
  --color-orange-darker: #e67d3a; /* Orange hover variant (family dept) */

  /* ==========================================================================
     GRADIENTS
     ========================================================================== */

  --gradient-primary: linear-gradient(
    135deg,
    var(--color-secondary) 0%,
    var(--color-accent) 50%,
    var(--color-tertiary-cyan) 100%
  );

  /* ==========================================================================
     SPACING (Optional - for future use)
     ========================================================================== */

  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */
  --spacing-3xl: 4rem; /* 64px */

  /* ==========================================================================
     BORDER RADIUS (Optional - for future use)
     ========================================================================== */

  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 10px;
  --radius-full: 9999px;

  /* ==========================================================================
     SHADOWS (Optional - for future use)
     ========================================================================== */

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 5px 5px 0 rgba(66, 133, 244, 0.3);
}

/* ==========================================================================
   DARK MODE (Future Enhancement)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Uncomment when implementing dark mode */
    /* --color-text-primary: var(--color-gray-100); */
    /* --color-bg-body: var(--color-gray-900); */
  }
}