/**
 * DM Blog Template – CSS Variables
 * Author: Sujee
 *
 * ════════════════════════════════════════════════════════
 *  CUSTOMIZE YOUR THEME HERE — change any value below
 *  to restyle the entire site instantly.
 * ════════════════════════════════════════════════════════
 */

:root {

  /* ── BRAND COLORS ──────────────────────────────────── */
  --accent:        #fb6630;   /* Orange – primary CTA, badges, underlines   */
  --accent-dark:   #e0521f;   /* Darker orange on hover                     */
  --navy:          #114b85;   /* Navy blue – header border, archive bg      */
  --navy-dark:     #0c3660;   /* Darker navy                                */

  /* keep --red aliased so shared CSS works without edits */
  --red:           #fb6630;
  --red-dark:      #e0521f;

  /* ── NEUTRALS ──────────────────────────────────────── */
  --dark:          #1c2230;   /* Near-black with slight blue tint            */
  --mid:           #3d4a5c;
  --muted:         #7a8799;
  --light:         #f6f8fb;   /* Very light blue-grey background             */
  --border:        #e2e8f0;
  --white:         #ffffff;

  /* ── SECTION BACKGROUNDS (light tint for alternating sections) */
  --bg-section-1:  #fff8f5;   /* Warm orange tint – section 1               */
  --bg-section-2:  #f0f5ff;   /* Cool blue tint  – section 2                */
  --bg-section-3:  #f5fff8;   /* Green tint      – section 3                */
  --bg-section-4:  #fff8f5;   /* Warm orange tint – section 4               */

  /* ── TYPOGRAPHY ────────────────────────────────────── */
  --font-body:     'Plus Jakarta Sans', sans-serif;
  --font-head:     'Sora', sans-serif;

  /* ── LAYOUT ────────────────────────────────────────── */
  --site-max:      1200px;

  /* ── BORDER RADIUS (the "curved" look) ────────────── */
  --radius-card:   12px;
  --radius-thumb:  10px;
  --radius-badge:  20px;
  --radius-btn:    8px;
  --radius-input:  8px;

  /* ── SHADOWS ────────────────────────────────────────── */
  --shadow-card:   0 2px 16px rgba(17,75,133,.08);
  --shadow-hover:  0 6px 28px rgba(17,75,133,.14);

  /* ── CATEGORY COLORS ────────────────────────────────── */
  --cat-seo:       #114b85;
  --cat-social:    #fb6630;
  --cat-content:   #2e7d32;
  --cat-ppc:       #7b1fa2;
  --cat-email:     #c62828;
  --cat-analytics: #0277bd;
  --cat-strategy:  #e65100;
}