/* ============================================
   DESIGN TOKENS — Blog Pages
   Agentifiq.Web.MVC
   Used by: blog/index.html, blog/*.html
   Load AFTER tailwind.min.css, BEFORE blog.css
   ============================================ */

:root {
    /* === HEADER GRADIENT (dark blue) === */
    --color-header-start: #1e3a5f;
    --color-header-end:   #2d5a7b;
    --gradient-header: linear-gradient(135deg, var(--color-header-start), var(--color-header-end));

    /* === CARD COLORS === */
    --color-card-bg:      #ffffff;
    --color-card-border:  #e5e7eb;
    --color-card-shadow:  rgba(0, 0, 0, 0.08);
    --color-card-shadow-hover: rgba(0, 0, 0, 0.16);

    /* === BADGE / CATEGORY === */
    --color-badge-bg:       #667eea;
    --color-badge-text:     #ffffff;
    --color-badge-bg-alt:   #764ba2;

    /* === TEXT === */
    --color-fg-primary:   #111827;
    --color-fg-secondary: #4b5563;
    --color-fg-muted:     #6b7280;
    --color-fg-link:      var(--color-header-end);
    --color-fg-link-hover: var(--color-header-start);

    /* === BACKGROUND === */
    --color-bg-page:     #f9fafb;
    --color-bg-surface:  #ffffff;

    /* === TYPOGRAPHY === */
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

    /* === BORDERS === */
    --color-border: #e5e7eb;
}