/*
 * variables.css — TechAgro Global Design Tokens
 * ------------------------------------------------
 * This is your "design settings" file.
 * Change a color or font here and it updates everywhere on the site.
 * You do NOT need to touch any other CSS file for basic color/font changes.
 */

:root {

  /* ─── PRIMARY COLORS ─────────────────────────────────────── */
  --color-green-dark:    #1B4332;   /* Main dark green — used for header bg, buttons, accents */
  --color-green-mid:     #2D6A4F;   /* Mid green — hover states, sidebar bg */
  --color-green-light:   #52B788;   /* Light green — highlights, tag backgrounds */
  --color-green-pale:    #D8F3DC;   /* Very pale green — subtle section backgrounds */

  /* ─── NEUTRAL COLORS ─────────────────────────────────────── */
  --color-white:         #FFFFFF;
  --color-bg:            #F9FAFB;   /* Page background — off-white, easy on the eyes */
  --color-border:        #E2E8E4;   /* Borders, dividers */
  --color-text-dark:     #1A1A1A;   /* Main body text */
  --color-text-mid:      #4A5568;   /* Secondary text, excerpts */
  --color-text-light:    #718096;   /* Dates, labels, small metadata */

  /* ─── CARD / POST BOX ────────────────────────────────────── */
  --card-bg:             #FFFFFF;
  --card-shadow-idle:    4px 4px 0px 0px #1B4332;   /* The offset dark-green shadow (idle state) */
  --card-border:         1.5px solid #1B4332;
  --card-radius:         10px;
  --card-transition:     0.22s ease;                 /* snappy but not instant */

  /* ─── TYPOGRAPHY ─────────────────────────────────────────── */
  --font-main:           'Poppins', sans-serif;       /* Used everywhere */
  --font-size-base:      16px;
  --line-height-base:    1.7;

  /* ─── SPACING ────────────────────────────────────────────── */
  --spacing-xs:          4px;
  --spacing-sm:          8px;
  --spacing-md:          16px;
  --spacing-lg:          24px;
  --spacing-xl:          40px;
  --spacing-xxl:         64px;

  /* ─── LAYOUT ─────────────────────────────────────────────── */
  --container-max:       1200px;
  --sidebar-width:       260px;
  --grid-gap:            24px;
}