/* ============================================================
   variables.css  —  Design Tokens & Custom Fonts
   NGO Theme · Yuva Shakti Samiti
   ============================================================ */

/* ── Custom Fonts ─────────────────────────────────────────── */
@font-face {
  font-family: "Akshar VariableFont";
  src: url("../fonts/Akshar-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rhodium Libre";
  src: url("../fonts/NotoSans-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ── Root Variables ───────────────────────────────────────── */
:root {
  /* Brand Colours */
  --color-primary:      #de3808;
  --color-primary-dark: #cd3602;
  --color-secondary:    #fe941a;
  --color-light:        #ffe0b7;

  /* Neutrals */
  --color-text:   #1a1a1ac7;
  --color-muted:  #6b6b6b;
  --color-bg:     #f5f0eb;
  --color-white:  #ffffff;

  /* Spacing */
  --section-padding:   80px;
  --section-sm-padding:   50px;
  --container-padding: 20px;

  /* Radius & Shadow */
  --r:  12px;
  --sh: 0 4px 24px rgba(0, 0, 0, 0.10);

  /* Transition */
  --transition: all 0.22s ease;

  /* Typography */
  --font-heading: "Akshar VariableFont", sans-serif;
  --font-body:    "Rhodium Libre", serif;
}

/* ── Base Reset ───────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}