/* ========== Global Design System - Unified Styles ========== */
/* This file establishes consistent design tokens and base styles across all pages */

:root {
    /* ========================================
       PRIMARY COLORS (Keep these - they pass)
       ======================================== */
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-darker: #1e40af;
    --secondary: #7c3aed;
    
    /* ========================================
       ACCENT COLORS (Keep these)
       ======================================== */
    --accent-amber: #f59e0b;
    --accent-yellow: #facc15;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    
    /* ========================================
       NEUTRAL COLORS - FULLY ACCESSIBLE
       Updated for WCAG 2.1 AA compliance
       ======================================== */
    
    /* LIGHT GRAYS (For backgrounds & borders only) */
    --gray-50: #f8fafc;   /* Backgrounds only - DO NOT use for text */
    --gray-100: #f1f5f9;  /* Backgrounds only - DO NOT use for text */
    --gray-200: #e2e8f0;  /* Borders & backgrounds - DO NOT use for text on white */
    --gray-300: #cbd5e1;  /* Borders & dividers - DO NOT use for text on white */
    
    /* DARK GRAYS (For text on white backgrounds) */
    --gray-400: #94a3b8;  /* ⚠️ Only for LARGE text (18pt+) or dark backgrounds */
    --gray-500: #64748b;  /* ⚠️ Only for LARGE text (18pt+) or dark backgrounds */
    --gray-600: #475569;  /* ✅ Safe for body text (5.2:1) */
    --gray-700: #334155;  /* ✅ Excellent for body text (9.6:1) */
    --gray-800: #1e293b;  /* ✅ Perfect for body text (14.3:1) */
    --gray-900: #0f172a;  /* ✅ Perfect for headings (16.7:1) */
    
    /* ========================================
       SEMANTIC TEXT COLORS (RECOMMENDED)
       Use these instead of raw gray values
       ======================================== */
    --text-heading: var(--gray-900);     /* #0f172a - 16.7:1 on white ✅ */
    --text-body: var(--gray-800);        /* #1e293b - 14.3:1 on white ✅ */
    --text-secondary: var(--gray-700);   /* #334155 - 9.6:1 on white ✅ */
    --text-muted: var(--gray-600);       /* #475569 - 5.2:1 on white ✅ */
    --text-muted-large: var(--gray-500); /* #64748b - 4.1:1 (use 18pt+) ⚠️ */
    --text-on-dark: #ffffff;             /* White - 21:1 on dark ✅ */
    --text-on-primary: #ffffff;          /* White - 4.6:1 on #2563eb ✅ */
    --text-on-secondary: #ffffff;        /* White - 4.8:1 on #7c3aed ✅ */
    
    /* ========================================
       BACKGROUND COLORS
       ======================================== */
    --bg-white: #ffffff;
    --bg-light: var(--gray-50);          /* #f8fafc */
    --bg-gray: var(--gray-100);          /* #f1f5f9 */
    --bg-dark: var(--gray-900);          /* #0f172a */
    --bg-primary: var(--primary);        /* #2563eb */
    --bg-secondary: var(--secondary);    /* #7c3aed */
    
    /* ========================================
       BORDER COLORS
       ======================================== */
    --border-light: var(--gray-200);     /* #e2e8f0 */
    --border-medium: var(--gray-300);    /* #cbd5e1 */
    --border-dark: var(--gray-400);      /* #94a3b8 */
    
    /* ========================================
       LINK COLORS
       ======================================== */
    --link-color: var(--primary);              /* #2563eb - 4.6:1 ✅ */
    --link-hover: var(--primary-dark);         /* #1d4ed8 - 5.4:1 ✅ */
    --link-visited: #7c3aed;                   /* #7c3aed - 4.1:1 ✅ */
    
    /* ========================================
       BUTTON COLORS
       ======================================== */
    --btn-primary-bg: var(--primary);          /* #2563eb */
    --btn-primary-text: #ffffff;               /* White - 4.6:1 ✅ */
    --btn-primary-hover: var(--primary-dark);  /* #1d4ed8 */
    
    --btn-secondary-bg: var(--gray-200);       /* #e2e8f0 */
    --btn-secondary-text: var(--gray-900);     /* #0f172a - 14.3:1 ✅ */
    --btn-secondary-hover: var(--gray-300);    /* #cbd5e1 */
    
    --btn-danger-bg: var(--accent-red);        /* #ef4444 */
    --btn-danger-text: #ffffff;                /* White - 4.5:1 ✅ */
    --btn-danger-hover: #dc2626;               /* #dc2626 */
    
    /* ========================================
       TYPOGRAPHY (Keep as is)
       ======================================== */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px - SAFE for muted text */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    --font-size-5xl: 3rem;        /* 48px */
    --font-size-6xl: 3.75rem;     /* 60px */
    
    /* ========================================
       SPACING (Keep as is)
       ======================================== */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;
    
    /* ========================================
       BORDER RADIUS (Keep as is)
       ======================================== */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-full: 9999px;
    
    /* ========================================
       SHADOWS (Keep as is)
       ======================================== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* ========================================
       TRANSITIONS (Keep as is)
       ======================================== */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-slower: 500ms ease;
}
/* ========== Reset & Base ========== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--gray-900);
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== Typography ========== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--gray-900);
    letter-spacing: -0.02em;
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

p {
    margin-bottom: 1em;
    color: var(--gray-400);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-dark);
}

/* ========== Layout ========== */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

.container-fluid {
    width: 100%;
}

/* ========== Buttons ========== */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: 14px 36px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 700;
    border-radius: var(--radius-xl);
    border: none;
    cursor: pointer;
    transition: all var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #FFFFFF;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(37, 99, 235, 0.35);
    color: #FFFFFF;
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: 12px 32px;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--primary);
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-outline:hover {
    background: var(--gray-50);
    border-color: var(--primary-dark);
    color: var(--primary);
}

.btn-large {
    padding: 16px 40px;
    font-size: 1.05rem;
}

/* ========== Cards ========== */
.card {
    background: white;
    border-radius: var(--radius-3xl);
    padding: var(--spacing-8);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* ========== Sections ========== */
.section {
    padding: var(--spacing-20) 0;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-12);
}

.section-header h2 {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: var(--spacing-4);
}

.section-header p {
    font-size: var(--font-size-lg);
    color: var(--gray-500);
    max-width: 600px;
    margin: 0 auto;
}

/* ========== Utility Classes ========== */
.text-center { text-align: center; }
.text-primary { color: var(--primary); }
.text-muted { color: var(--gray-500); }
.text-white { color: white; }

.text-black { color: var(--gray-900); }

.bg-primary { background-color: var(--primary); }
.bg-gray-50 { background-color: var(--gray-50); }
.bg-white { background-color: white; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-8 { margin-bottom: var(--spacing-8); }

.mt-4 { margin-top: var(--spacing-4); }
.mt-8 { margin-top: var(--spacing-8); }

.gap-4 { gap: var(--spacing-4); }
.gap-8 { gap: var(--spacing-8); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ========== Gradient Text ========== */
.gradient-text {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ========== Focus States ========== */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ========== Responsive Breakpoints ========== */
/* Large screens (1280px+) */
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

/* Medium-large screens (1024px - 1279px) */
@media (max-width: 1279px) {
    .container {
        padding: 0 var(--spacing-6);
    }
}

/* Privacy page grid for responsive layout */
.privacy-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 1023px) {
    .privacy-grid {
        grid-template-columns: 1fr;
    }
    .privacy-grid aside {
        order: 2; /* place sidebar after main content on narrow screens */
    }
    .privacy-grid main {
        order: 1;
    }
}

@media (max-width: 767px) {
    .privacy-grid {
        gap: 20px;
    }
}

/* Tablets (768px - 1023px) */
@media (max-width: 1023px) {
    :root {
        --font-size-5xl: 2.5rem;
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.5rem;
    }
    
    .container {
        padding: 0 var(--spacing-6);
    }
    
    .section {
        padding: var(--spacing-16) 0;
    }
}

/* Mobile (480px - 767px) */
@media (max-width: 767px) {
    :root {
        --font-size-5xl: 2rem;
        --font-size-4xl: 1.75rem;
        --font-size-3xl: 1.375rem;
        --font-size-2xl: 1.25rem;
    }
    
    .container {
        padding: 0 var(--spacing-5);
    }
    
    .section {
        padding: var(--spacing-12) 0;
    }
    
    h1, h2, h3 {
        line-height: 1.3;
    }
}

/* Small mobile (< 480px) */
@media (max-width: 479px) {
    :root {
        --font-size-5xl: 1.75rem;
        --font-size-4xl: 1.5rem;
        --font-size-3xl: 1.25rem;
    }
    
    .container {
        padding: 0 var(--spacing-4);
    }
    
    .btn-primary {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
}

/* ========== Accessibility ========== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    }
}

/* ========== Print Styles ========== */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .btn-primary,
    .btn-outline {
        display: none;
    }
}

/* ========== Blog Article Styles ========== */
.blog-article-hero{margin-bottom:32px}
.blog-article-breadcrumb{color:var(--gray-500);font-weight:700;font-size:.9rem;margin-bottom:10px}
.blog-article-title{font-size:clamp(2rem,4vw,3rem);font-weight:900;letter-spacing:-0.03em;margin-bottom:12px}
.blog-article-subtitle{font-size:1.15rem;color:var(--gray-600);max-width:720px;line-height:1.7;margin-bottom:18px}
.blog-article-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;color:var(--gray-500);font-weight:600;font-size:.95rem;margin-bottom:22px}
.blog-article-meta .dot{opacity:.6}
.blog-article-meta .pill{background:linear-gradient(135deg, #EFF6FF, #DBEAFE);border:1px solid #BFDBFE;color:#1E40AF;padding:6px 14px;border-radius:9999px}
.blog-article-content{max-width:860px}
.blog-article-content h2{font-size:1.55rem;margin:26px 0 12px}
.blog-article-content ul{margin:10px 0 18px 20px}
.article-cta{margin-top:28px;padding:18px;border-radius:14px;border:1px solid var(--gray-200);background:var(--gray-50)}
.author-box{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;border:1px solid var(--gray-200);background:var(--gray-50);margin-top:18px}
.author-box img{width:56px;height:56px;border-radius:9999px;object-fit:cover}
.author-box .meta{color:var(--gray-500);font-size:.95rem;margin-top:4px}
.blog-article-content .article-cta a{font-weight:800}

.article-header {
    margin-bottom: 20px;
}
.article-header .meta {
    color: var(--gray-500);
    font-size: 0.95rem;
    margin-bottom: 12px;
}
.featured-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    margin: 18px 0;
    object-fit: cover;
}
.article-content h2 {
    margin-top: 1.4rem;
}
.author-box {
    display:flex;
    gap:12px;
    align-items:center;
    padding:12px;
    border-radius:8px;
    border:1px solid var(--gray-200);
    background:var(--gray-50);
}
.author-box img{width:56px;height:56px;border-radius:9999px;object-fit:cover}
.article-cta{margin-top:28px;padding:18px;border-radius:10px;border:1px solid var(--gray-200);background:var(--gray-50)}