/* ═══════════════════════════════════════════════════════════════════════════
   IMPARTIO — Design Tokens (index.css)
   
   All design variables in one place. Change the palette here and the
   entire site updates. No color names — semantic purpose only.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Backgrounds ──────────────────────────────────────────────────────── */
  --bkg-dark:       #0F2325; /* #1B3A5C; Navy */
  --bkg-dark-90:    rgba(27, 58, 92, 0.9);
  --bkg-dark-light: #1c3f42; /* #224872; Navy - light */
  --bkg-light:      #F7F3EC;
  --bkg-white:      #FFFFFF;
  --bkg-subtle:     #FAF8F4;

  /* ── Accent ───────────────────────────────────────────────────────────── */
  --accent:         #C89B3C;
  --accent-hover:   #B08A30;
  --accent-glow:    rgba(200, 155, 60, 0.08);
  --accent-ring:    rgba(200, 155, 60, 0.15);

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --text-primary:   #2B2B2B;
  --text-muted:     #6B7B8D;
  --text-on-dark:   #FFFFFF;
  --text-on-accent: #FFFFFF;

  /* ── Borders & Rules ──────────────────────────────────────────────────── */
  --border:         #D8D0C4;
  --border-on-dark: rgba(107, 123, 141, 0.15);
  --border-on-dark-subtle: rgba(107, 123, 141, 0.3);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-heading:   'Poppins', serif; /* 'DM Serif Display', serif; */
  --font-body:      'Poppins', serif; /* 'DM Sans', sans-serif; */
  --font-sig:       'Brush Script MT', cursive;

  /* ── Spacing (4px base) ───────────────────────────────────────────────── */
  --sp-1:   0.25rem;    /*  4px */
  --sp-2:   0.5rem;     /*  8px */
  --sp-3:   0.75rem;    /* 12px */
  --sp-4:   1rem;       /* 16px */
  --sp-5:   1.25rem;    /* 20px */
  --sp-6:   1.5rem;     /* 24px */
  --sp-8:   2rem;       /* 32px */
  --sp-10:  2.5rem;     /* 40px */
  --sp-12:  3rem;       /* 48px */
  --sp-16:  4rem;       /* 64px */
  --sp-20:  5rem;       /* 80px */

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --max-width:      1200px;
  --content-width:  760px;
  --narrow-width:   600px;

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      16px;
  --radius-pill:    9999px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-sm:      0 1px 3px rgba(10, 22, 40, 0.05);
  --shadow-md:      0 4px 12px rgba(10, 22, 40, 0.08);
  --shadow-lg:      0 8px 30px rgba(10, 22, 40, 0.12);
  --shadow-accent:  0 4px 14px rgba(200, 155, 60, 0.25);

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --ease-fast:      150ms ease;
  --ease-base:      250ms ease;
  --ease-slow:      400ms ease;
}