/* 
 * Theme Base CSS
 * This file contains the base structure and variables for our theming system.
 * It defines CSS custom properties (variables) that will be overridden by specific theme files.
 */

:root {
    /* === COLOR SCHEME VARIABLES === */
    /* Primary colors */
    --color-primary: #3490dc;
    --color-primary-light: #63b3ed;
    --color-primary-dark: #2779bd;
    
    /* Secondary colors */
    --color-secondary: #38a169;
    --color-secondary-light: #68d391;
    --color-secondary-dark: #2f855a;
    
    /* Neutrals */
    --color-background: #ffffff;
    --color-surface: #f7fafc;
    --color-surface-variant: #edf2f7;
    --color-text-primary: #1a202c;
    --color-text-secondary: #4a5568;
    --color-text-muted: #718096;
    --color-border: #e2e8f0;
    
    /* Accent colors */
    --color-accent: #ed8936;
    --color-accent-light: #fbd38d;
    --color-accent-dark: #c05621;
    
    /* States */
    --color-error: #e53e3e;
    --color-success: #38a169;
    --color-warning: #f6ad55;
    --color-info: #4299e1;
    
    /* === TYPOGRAPHY VARIABLES === */
    /* Font families */
    --font-family-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-family-secondary: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-family-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    
    /* Base sizes */
    --font-size-base: 16px;
    --line-height-base: 1.5;
    
    /* Font sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    
    /* Font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line heights */
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
    
    /* Letter spacing */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    
    /* === SPACING AND SIZING VARIABLES === */
    /* Base spacing unit */
    --spacing-unit: 0.25rem;
    
    /* Spacing scale */
    --spacing-0: 0;
    --spacing-1: calc(var(--spacing-unit) * 1);
    --spacing-2: calc(var(--spacing-unit) * 2);
    --spacing-3: calc(var(--spacing-unit) * 3);
    --spacing-4: calc(var(--spacing-unit) * 4);
    --spacing-5: calc(var(--spacing-unit) * 5);
    --spacing-6: calc(var(--spacing-unit) * 6);
    --spacing-8: calc(var(--spacing-unit) * 8);
    --spacing-10: calc(var(--spacing-unit) * 10);
    --spacing-12: calc(var(--spacing-unit) * 12);
    --spacing-16: calc(var(--spacing-unit) * 16);
    --spacing-20: calc(var(--spacing-unit) * 20);
    --spacing-24: calc(var(--spacing-unit) * 24);
    --spacing-32: calc(var(--spacing-unit) * 32);
    --spacing-40: calc(var(--spacing-unit) * 40);
    --spacing-48: calc(var(--spacing-unit) * 48);
    --spacing-56: calc(var(--spacing-unit) * 56);
    --spacing-64: calc(var(--spacing-unit) * 64);
    
    /* Border radius */
    --border-radius-none: 0;
    --border-radius-sm: 0.125rem;
    --border-radius-md: 0.25rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 1rem;
    --border-radius-full: 9999px;
    
    /* Box shadows */
    --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);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    
    /* Z-index scale */
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-auto: auto;
    
    /* === ANIMATION VARIABLES === */
    --transition-duration: 0.2s;
    --transition-timing: ease-in-out;
    
    /* === LAYOUT VARIABLES === */
    --container-max-width: 1200px;
    --container-padding: var(--spacing-4);
    
    /* === DENSITY VARIABLES === */
    /* These will be adjusted by different density themes */
    --density-factor: 1; /* Default: Comfortable */
    --space-section: calc(var(--spacing-16) * var(--density-factor));
    --space-component: calc(var(--spacing-8) * var(--density-factor));
    --space-element: calc(var(--spacing-4) * var(--density-factor));
    --space-inset: calc(var(--spacing-2) * var(--density-factor));
    
    /* === RESPONSIVE BREAKPOINTS === */
    /* These are used with media queries */
    --breakpoint-xs: 0;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;  
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* === DARK MODE === */
.dark {
    --color-background: #1a202c;
    --color-surface: #2d3748;
    --color-surface-variant: #4a5568;
    --color-text-primary: #f7fafc;
    --color-text-secondary: #e2e8f0;
    --color-text-muted: #a0aec0;
    --color-border: #4a5568;
    
    /* Adjust shadows for dark mode */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.12);
}

/* === BASE STYLES === */
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    margin-top: 0;
    margin-bottom: var(--spacing-4);
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

h1 {
    font-size: var(--font-size-4xl);
}

h2 {
    font-size: var(--font-size-3xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-md);
}

p {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
}

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

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

img {
    max-width: 100%;
    height: auto;
}

/* === LAYOUT COMPONENTS === */
.container {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    width: 100%;
    box-sizing: border-box;
}

.section {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section);
}

/* === UTILITY CLASSES === */

/* Display utilities */
.d-none {
    display: none !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

.d-grid {
    display: grid !important;
}

/* Flex utilities */
.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-around {
    justify-content: space-around !important;
}

.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.align-items-center {
    align-items: center !important;
}

.align-items-baseline {
    align-items: baseline !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

/* Grid utilities */
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.gap-1 {
    gap: var(--spacing-1) !important;
}

.gap-2 {
    gap: var(--spacing-2) !important;
}

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

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

/* Text utilities */
.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

/* Background utilities */
.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.bg-accent {
    background-color: var(--color-accent) !important;
}

.bg-surface {
    background-color: var(--color-surface) !important;
}

.bg-surface-variant {
    background-color: var(--color-surface-variant) !important;
}

/* Spacing utilities */
.m-0 { margin: var(--spacing-0) !important; }
.m-1 { margin: var(--spacing-1) !important; }
.m-2 { margin: var(--spacing-2) !important; }
.m-4 { margin: var(--spacing-4) !important; }
.m-8 { margin: var(--spacing-8) !important; }

.mt-0 { margin-top: var(--spacing-0) !important; }
.mt-1 { margin-top: var(--spacing-1) !important; }
.mt-2 { margin-top: var(--spacing-2) !important; }
.mt-4 { margin-top: var(--spacing-4) !important; }
.mt-8 { margin-top: var(--spacing-8) !important; }

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

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.p-0 { padding: var(--spacing-0) !important; }
.p-1 { padding: var(--spacing-1) !important; }
.p-2 { padding: var(--spacing-2) !important; }
.p-4 { padding: var(--spacing-4) !important; }
.p-8 { padding: var(--spacing-8) !important; }

/* Responsive utilities */
@media (min-width: 640px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-grid { display: grid !important; }
    
    .grid-cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
    .d-md-grid { display: grid !important; }
    
    .grid-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .grid-cols-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (min-width: 1024px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-grid { display: grid !important; }
    
    .grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .grid-cols-lg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* === COMPONENT STYLES === */

/* Article cards */
.article-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-duration), box-shadow var(--transition-duration);
    margin-bottom: var(--space-component);
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.article-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.article-card__content {
    padding: var(--space-element);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.article-card__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-element);
}

.article-card__summary {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-element);
    flex-grow: 1;
}

.article-card__meta {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* Navigation */
.nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.nav-item {
    padding: var(--spacing-2) 0;
}

.nav-item a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--transition-duration);
}

.nav-item a:hover {
    color: var(--color-primary);
}

/* Ad containers */
.ad-container {
    margin: var(--space-component) 0;
    padding: var(--space-element);
    background-color: var(--color-surface-variant);
    border-radius: var(--border-radius-md);
    text-align: center;
}

/* === MISC === */

/* Utility for hiding elements visually but keeping them accessible for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Print styles - hide unnecessary elements */
@media print {
    .no-print {
        display: none !important;
    }
}