/*
 * NAMKC Youth Website - CSS Custom Properties (Variables)
 * Complete design system implementation
 * Based on NAMKC-Youth-Complete-Design-System.md
 */

:root {
  /* ============================
     PRIMARY COLORS
     ============================ */

  /* Primary Blue (Heritage) - Deep blue for Syriac Christian heritage */
  --color-primary: #1B4F72;
  --color-primary-dark: #153A54;
  --color-primary-light: #2471A3;

  /* Golden Accent (Light of Faith) - Divine light and celebration */
  --color-accent: #F39C12;
  --color-accent-dark: #D68910;
  --color-accent-light: #F8B739;

  /* Burgundy Secondary (Tradition) - Liturgical colors */
  --color-secondary: #922B21;
  --color-secondary-dark: #78231B;
  --color-secondary-light: #A93226;

  /* ============================
     NEUTRAL COLORS
     ============================ */

  /* Text Colors */
  --color-text-primary: #2C3E50;
  --color-text-secondary: #7F8C8D;
  --color-text-light: #BDC3C7;

  /* Background Colors */
  --color-bg-primary: #FFFFFF;
  --color-bg-alternate: #F8F9FA;
  --color-bg-accent: #EBF5FB;

  /* Border Colors */
  --color-border-light: #E8E8E8;
  --color-border-medium: #BDC3C7;
  --color-border-dark: #7F8C8D;

  /* ============================
     SEMANTIC COLORS
     ============================ */

  --color-success: #27AE60;
  --color-warning: #E67E22;
  --color-error: #C0392B;
  --color-info: #3498DB;

  /* ============================
     TYPOGRAPHY
     ============================ */

  /* Font Families - Google Fonts */
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font Sizes - Mobile (Base: 16px) */
  --font-size-h1: 2rem;        /* 32px */
  --font-size-h2: 1.5rem;      /* 24px */
  --font-size-h3: 1.25rem;     /* 20px */
  --font-size-h4: 1.125rem;    /* 18px */
  --font-size-h5: 1rem;        /* 16px */
  --font-size-body: 1rem;      /* 16px */
  --font-size-small: 0.875rem; /* 14px */
  --font-size-tiny: 0.75rem;   /* 12px */

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;

  /* ============================
     SPACING SCALE (8px Base Grid)
     ============================ */

  --spacing-unit: 8px;
  --spacing-xs: calc(var(--spacing-unit) * 0.5);   /* 4px */
  --spacing-sm: var(--spacing-unit);                /* 8px */
  --spacing-md: calc(var(--spacing-unit) * 2);     /* 16px */
  --spacing-lg: calc(var(--spacing-unit) * 3);     /* 24px */
  --spacing-xl: calc(var(--spacing-unit) * 4);     /* 32px */
  --spacing-2xl: calc(var(--spacing-unit) * 6);    /* 48px */
  --spacing-3xl: calc(var(--spacing-unit) * 8);    /* 64px */

  /* ============================
     LAYOUT DIMENSIONS
     ============================ */

  /* Container Max Widths */
  --container-mobile: 100%;
  --container-tablet: 720px;
  --container-desktop: 960px;
  --container-large: 1200px;

  /* Grid System */
  --grid-columns: 12;
  --grid-gutter-mobile: 16px;
  --grid-gutter-tablet: 24px;
  --grid-gutter-desktop: 32px;

  /* ============================
     BREAKPOINTS (for reference)
     ============================ */

  /* These are used in media queries, not as CSS variables */
  /* Mobile: 320px - 767px (default) */
  /* Tablet: 768px - 1023px */
  /* Desktop: 1024px - 1439px */
  /* Large: 1440px+ */

  /* ============================
     BORDER RADIUS
     ============================ */

  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 12px;
  --radius-full: 9999px;

  /* ============================
     SHADOWS
     ============================ */

  --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);

  /* ============================
     TRANSITIONS
     ============================ */

  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* ============================
     Z-INDEX SCALE
     ============================ */

  --z-index-dropdown: 1000;
  --z-index-sticky: 1100;
  --z-index-fixed: 1200;
  --z-index-modal-backdrop: 1300;
  --z-index-modal: 1400;
  --z-index-popover: 1500;
  --z-index-tooltip: 1600;

  /* ============================
     COMPONENT-SPECIFIC VALUES
     ============================ */

  /* Buttons */
  --button-padding-y-mobile: 12px;
  --button-padding-x-mobile: 24px;
  --button-padding-y-desktop: 14px;
  --button-padding-x-desktop: 32px;
  --button-min-height: 44px; /* WCAG touch target */

  /* Forms */
  --input-padding-y: 12px;
  --input-padding-x: 16px;
  --input-min-height: 44px; /* WCAG touch target */
  --input-border-width: 1px;

  /* Cards */
  --card-padding-mobile: 16px;
  --card-padding-desktop: 24px;

  /* Navigation */
  --nav-height-mobile: 64px;
  --nav-height-desktop: 80px;

  /* Footer */
  --footer-padding-y: 48px;
}

/* ============================
   TABLET BREAKPOINT ADJUSTMENTS
   ============================ */

@media (min-width: 768px) {
  :root {
    /* Font Sizes - Tablet */
    --font-size-h1: 2.5rem;      /* 40px */
    --font-size-h2: 2rem;        /* 32px */
    --font-size-h3: 1.5rem;      /* 24px */
    --font-size-h4: 1.25rem;     /* 20px */
    --font-size-h5: 1.125rem;    /* 18px */
    --font-size-body: 1rem;      /* 16px */
    --font-size-small: 0.875rem; /* 14px */
  }
}

/* ============================
   DESKTOP BREAKPOINT ADJUSTMENTS
   ============================ */

@media (min-width: 1024px) {
  :root {
    /* Font Sizes - Desktop */
    --font-size-h1: 3rem;        /* 48px */
    --font-size-h2: 2.25rem;     /* 36px */
    --font-size-h3: 1.75rem;     /* 28px */
    --font-size-h4: 1.5rem;      /* 24px */
    --font-size-h5: 1.25rem;     /* 20px */
    --font-size-body: 1.125rem;  /* 18px */
    --font-size-small: 1rem;     /* 16px */
    --font-size-tiny: 0.875rem;  /* 14px */

    /* Section Spacing - Desktop */
    --spacing-section: var(--spacing-3xl); /* 64px on desktop */
  }
}

/*
 * DEVELOPER NOTES:
 *
 * Usage Example:
 * .my-component {
 *   color: var(--color-primary);
 *   font-family: var(--font-heading);
 *   padding: var(--spacing-md);
 *   border-radius: var(--radius-medium);
 * }
 *
 * To customize for NAMKC integration:
 * 1. Update color values if parent NAMKC site provides brand colors
 * 2. Adjust container max-widths based on parent site layout
 * 3. Update font families if parent site uses different fonts
 * 4. All spacing uses 8px base grid for consistency
 *
 * Accessibility:
 * - All color combinations tested for WCAG AA compliance
 * - Touch targets minimum 44px (--button-min-height, --input-min-height)
 * - Font sizes never below 16px for body text (prevents mobile zoom)
 */