/* =====================================================
   COMMUNITY THEME - CSS Variables and Base Styles
   Source: communitiesdesign/incontrol-community-li.html
   WCAG 2.1 AA Compliant
   ===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Primary Theme Colors */
    --primary-color: var(--community-primary, #6A4A9E);
    --primary-color-text: var(--community-primary-text, #ffffff);
    --primary-color-safe: var(--community-primary-safe, #6A4A9E);
    --accent-color: var(--community-accent, #7BCED7);
    --accent-color-text: var(--community-accent-text, #000000);

    /* WCAG AA Compliant Text Colors */
    --text-primary: #1f2937;    /* 15.04:1 contrast on white - WCAG AAA */
    --text-secondary: #4B5563;  /* 7.48:1 contrast on white - WCAG AA */
    --accent-text: #1A7A8A;     /* 5.02:1 contrast on white - WCAG AA */
    --text-contrast-high: #374151; /* High contrast mode text-secondary */

    /* UI Utility Colors */
    --glass-white: rgba(0, 0, 0, 0.05);
    --glass-border: rgba(0, 0, 0, 0.1);
    --dark-bg: #ffffff;
    --bg-white: #ffffff;
    --bg-gray-light: #f9fafb;

    /* Status Colors (WCAG AA compliant) */
    --success: #059669;         /* 4.65:1 on light green backgrounds */
    --success-bg: rgba(5, 150, 105, 0.1);
    --warning: #D97706;
    --error: #DC2626;           /* 5.51:1 on white - WCAG AA */
    --accent-bg: rgba(26, 122, 138, 0.1);

    /* Notification gradient (WCAG AA with white text) */
    --notification-gradient-start: #C44D1C; /* 4.53:1 with white */
    --notification-gradient-end: #E86A3F;

    /* Typography Scale (Mobile base) */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */

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

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
}

/* =====================================================
   RESPONSIVE TYPOGRAPHY - Tablets (768px+)
   Source: incontrol-community-li.html lines 1777-1786
   ===================================================== */

@media (min-width: 768px) {
    :root {
        --font-size-base: 1rem;       /* 16px */
        --font-size-lg: 1.25rem;      /* 20px */
        --font-size-xl: 1.375rem;     /* 22px */
        --font-size-2xl: 1.625rem;    /* 26px */
        --spacing-md: 1.5rem;         /* 24px */
        --spacing-lg: 2rem;           /* 32px */
        --spacing-xl: 2.5rem;         /* 40px */
    }
}

/* =====================================================
   RESPONSIVE TYPOGRAPHY - Desktop (1250px+)
   Source: incontrol-community-li.html lines 1882-1890
   ===================================================== */

@media (min-width: 1250px) {
    :root {
        --font-size-lg: 1.25rem;      /* 20px */
        --font-size-xl: 1.5rem;       /* 24px */
        --font-size-2xl: 1.75rem;     /* 28px */
        --font-size-3xl: 2rem;        /* 32px */
        --spacing-lg: 2rem;           /* 32px */
        --spacing-xl: 3rem;           /* 48px */
    }
}

/* Base body styles */
body {
    font-family: 'IBM Plex Sans', 'Inter', sans-serif;
    background: var(--bg-white);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    width: 100%;
    max-width: 100vw;
    padding-top: 76px; /* Base padding for mobile - space for fixed header */
}

/* Mobile: Additional adjustments */
@media (max-width: 1023px) {
    .main-container {
        padding-top: 1rem;
    }
}

/* Desktop: Adjust padding for proper spacing */
@media (min-width: 1024px) {
    body {
        padding-top: 80px; /* Slightly more for desktop */
    }
}

/* Desktop: Adjust body padding for taller header with logo */
@media (min-width: 1250px) {
    body {
        padding-top: 90px;
    }
}

html {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Prevent overflow from media */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Heading hierarchy */
h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-tight);
}

/* Content line heights */
p, .post-text, .community-update {
    line-height: var(--line-height-relaxed);
}

/* Subtle animated background */
.background-gradient {
    position: fixed;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(ellipse at center, rgba(106, 74, 158, 0.03) 0%, transparent 40%),
                radial-gradient(ellipse at bottom left, rgba(123, 206, 215, 0.03) 0%, transparent 40%),
                radial-gradient(ellipse at top right, rgba(123, 206, 215, 0.02) 0%, transparent 40%);
    animation: float 20s ease-in-out infinite;
    z-index: -1;
}

@keyframes float {
    0%, 100% { transform: translate(-10%, -10%) rotate(0deg); }
    33% { transform: translate(-5%, -15%) rotate(120deg); }
    66% { transform: translate(-15%, -5%) rotate(240deg); }
}