/* ============================================================
   Dibai NGO — CSS Design Tokens (Custom Properties)
   Import order: variables → global → components → layout → animations
   ============================================================ */

:root {

    /* ── Brand Palette ──────────────────────────────────── */
    --clr-primary:        #1a6b3c;   /* Forest green */
    --clr-primary-dark:   #134f2d;
    --clr-primary-light:  #27a85f;
    --clr-accent:         #f4a623;   /* Warm amber */
    --clr-accent-dark:    #d4890a;
    --clr-danger:         #e8374a;
    --clr-success:        #22c55e;
    --clr-info:           #3b82f6;
    --clr-warning:        #f59e0b;

    /* ── Neutrals ───────────────────────────────────────── */
    --clr-dark:           #0f1923;
    --clr-dark-2:         #1c2b3a;
    --clr-dark-3:         #2d3e50;
    --clr-body:           #3d4f5e;
    --clr-muted:          #6c7a8a;
    --clr-border:         #e4e9ef;
    --clr-light:          #f4f7fb;
    --clr-white:          #ffffff;

    /* ── Typography ─────────────────────────────────────── */
    --font-body:          'Plus Jakarta Sans', system-ui, sans-serif;
    --font-display:       'Playfair Display', Georgia, serif;
    --fs-xs:              0.75rem;
    --fs-sm:              0.875rem;
    --fs-base:            1rem;
    --fs-md:              1.125rem;
    --fs-lg:              1.25rem;
    --fs-xl:              1.5rem;
    --fs-2xl:             2rem;
    --fs-3xl:             2.5rem;
    --fs-4xl:             3rem;
    --fs-5xl:             3.75rem;
    --fw-light:           300;
    --fw-regular:         400;
    --fw-medium:          500;
    --fw-semibold:        600;
    --fw-bold:            700;
    --fw-extrabold:       800;
    --lh-tight:           1.25;
    --lh-normal:          1.6;
    --lh-loose:           1.8;

    /* ── Spacing ─────────────────────────────────────────── */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    /* ── Border Radius ──────────────────────────────────── */
    --radius-sm:    0.25rem;
    --radius-md:    0.5rem;
    --radius-lg:    1rem;
    --radius-xl:    1.5rem;
    --radius-2xl:   2rem;
    --radius-full:  9999px;

    /* ── Shadows ─────────────────────────────────────────── */
    --shadow-xs:    0 1px 3px rgba(0,0,0,.06);
    --shadow-sm:    0 2px 8px rgba(0,0,0,.08);
    --shadow-md:    0 4px 20px rgba(0,0,0,.1);
    --shadow-lg:    0 8px 40px rgba(0,0,0,.14);
    --shadow-xl:    0 20px 60px rgba(0,0,0,.18);
    --shadow-card:  0 4px 24px rgba(26,107,60,.1);

    /* ── Transitions ────────────────────────────────────── */
    --transition-fast:    150ms ease;
    --transition-base:    300ms ease;
    --transition-slow:    500ms ease;
    --transition-bounce:  400ms cubic-bezier(.68,-.55,.27,1.55);

    /* ── Layout ─────────────────────────────────────────── */
    --container-max:      1200px;
    --header-height:      80px;
    --topbar-height:      40px;
    --section-padding-y:  var(--sp-24);

    /* ── Z-index scale ──────────────────────────────────── */
    --z-below:    -1;
    --z-base:      0;
    --z-raised:    10;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-modal:     300;
    --z-toast:     400;
    --z-top:       999;
}