:root {
    --brand-primary: #1666b2;
    --brand-dark: #0f4c7c;
    --brand-light: #f8fafc;
    --brand-light-text: #FFFFFF;
    --accent: #2563eb;
    --neutral: #64748b;
    --white: #FFFFFF;
    --gray-light: #E5E7EB;
    --gray-medium: #9CA3AF;
    --gray-dark: #374151;
    --success: #10B981;
    --error: #EF4444;
    --warning: #F59E0B;
    --info: #3B82F6;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 12px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.15);
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
  }

  #ai_blog {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  .hero-section {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-dark) 100%);
  }

  .tag-filter-button {
    border-radius: var(--radius-medium);
    transition: var(--transition-fast);
  }

  .tag-filter-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .post-item {
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
  }

  .post-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }

  .site-post-search {
    border-radius: var(--radius-small);
  }

  .site-post-search:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(22, 102, 178, 0.2);
  }

  .post-load-more, .tag-link {
    border-radius: var(--radius-medium);
  }

  .faster-subscribe-form input {
    border-radius: var(--radius-small);
  }

  .faster-subscribe-form button {
    border-radius: var(--radius-medium);
    background-color: var(--brand-primary);
  }

  .faster-subscribe-form button:hover {
    background-color: var(--brand-dark);
  }

  h2::after {
    background-color: var(--brand-primary) !important;
  }

  .text-accent, .post-tag {
    color: var(--brand-primary) !important;
  }

  .group:hover .post-title {
    color: var(--brand-primary) !important;
  }

  .hover\:text-accent:hover {
    color: var(--brand-primary) !important;
  }

  .hover\:border-accent:hover {
    border-color: var(--brand-primary) !important;
  }

  .focus\:border-accent:focus {
    border-color: var(--brand-primary) !important;
  }

  .hover\:bg-gray-900:hover {
    background-color: var(--brand-dark) !important;
  }

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

  .border-accent {
    border-color: var(--brand-primary) !important;
  }

  .cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-24);
    justify-content: center;
  }