/* Base CSS Variables
 * These variables provide the foundation for all blog themes
 * Each theme can override specific variables to create its unique appearance
 */

:root {
  /* Color Palette */
  --color-primary: #4175ac;
  --color-primary-light: #dbebfd;
  --color-primary-lighter: #d7ebff;
  --color-secondary: #2199e8;
  --color-text-dark: #000;
  --color-text: #333;
  --color-text-medium: #5f5f5f;
  --color-text-light: #696969;
  --color-border-dark: #aaa;
  --color-border: #ccc;
  --color-border-light: #e5e5e5;
  --color-background-light: #f5f5f5;
  --color-white: #fff;
  --color-success: green;
  --color-error: red;
  
  /* Typography */
  --font-family-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-base: 1em;
  --font-size-small: 0.85em;
  --font-size-smaller: 0.8em;
  --font-size-large: 1.1em;
  --font-size-larger: 1.3em;
  --font-size-heading-1: 2em;
  --font-size-heading-2: 1.8em;
  --font-size-heading-3: 1.6em;
  --font-size-heading-4: 1.2em;
  --line-height-base: 1.5;
  --line-height-heading: 1.4;
  --line-height-paragraph: 1.6;
  
  /* Spacing */
  --spacing-xxs: 5px;
  --spacing-xs: 10px;
  --spacing-sm: 15px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 40px;
  --spacing-xxl: 50px;
  
  /* Layout */
  --container-width: 1200px;
  --content-width: calc(var(--container-width) - var(--sidebar-width) - var(--spacing-xl));
  --sidebar-width: 300px;
  --article-image-height: 200px;
  --featured-image-height: 400px;
  --featured-image-minheight: 60px;
  
  /* Borders & Radius */
  --border-radius-sm: 4px;
  --border-radius: 8px;
  --border-width: 1px;
  --border-width-thick: 2px;
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 5px 15px rgba(0, 0, 0, 0.15);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  
  /* Z-index layers */
  --z-index-header: 100;
  --z-index-dropdown: 200;
  --z-index-modal: 300;
}

/* Media query breakpoints (for reference) */
/* 
 * Mobile: max-width: 767px
 * Tablet: min-width: 768px and max-width: 1199px
 * Desktop: min-width: 1200px
 */