/* ═════════════════════════════════════════════════════════════════════════════
   AFIC Portal — design tokens, single source of truth.

   Every page used to carry its own :root block; there were 18 copies, and they
   had drifted. Changing one colour meant editing eighteen files, which is how
   the leave-type palette ended up inconsistent.

   Link this FIRST, before any page stylesheet, so a page can still override a
   token deliberately if it genuinely needs to.

   Two naming schemes are in use across the codebase (--font-b / --font-d from
   the standalone pages, --font-body / --font-display from main.css). Both are
   defined here as aliases so nothing has to be renamed. Prefer the long names
   in new code.
   ═════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Ink / text ─────────────────────────────────────────────────────────── */
  --ink:          #0d1117;
  --ink-soft:     #3d4451;
  --ink-muted:    #6e7891;
  --ink-2:        #3a3f4b;
  --ink-3:        #6b7280;

  /* ── Surfaces ───────────────────────────────────────────────────────────── */
  --paper:        #f4f2ee;   /* page background - the more widely used of the two */
  --paper-2:      #eceae4;
  --paper-warm:   #ede9e0;
  --card:         #ffffff;
  --paper-card:   #ffffff;
  --white:        #ffffff;
  --border:       #e2ddd5;

  /* ── Brand and semantic colour ──────────────────────────────────────────── */
  --accent:        #c84b2f;
  --accent-h:      #b03d24;
  --accent-hover:  #b03d24;
  --accent-light:  #f5e8e4;
  --green:         #2a6b4a;
  --green-light:   #e4f0ea;
  --blue:          #2c5282;
  --blue-light:    #e6eef7;
  --gold:          #d4933a;
  --gold-light:    #fdf3e3;
  --purple:        #6b3fa0;
  --purple-light:  #f3e8ff;
  --red:           #b91c1c;
  --red-light:     #fee2e2;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-b:       var(--font-body);      /* alias used by the standalone pages */
  --font-d:       var(--font-display);   /* alias used by the standalone pages */

  /* ── Shape ──────────────────────────────────────────────────────────────── */
  --radius:     10px;
  --radius-lg:  16px;

  /* ── Elevation. The two-layer versions read softer than a single hard drop. */
  --shadow:     0 2px 12px rgba(13,17,23,.08);
  --shadow-sm:  0 1px 3px  rgba(13,17,23,.08), 0 1px 2px rgba(13,17,23,.06);
  --shadow-md:  0 4px 12px rgba(13,17,23,.10), 0 2px 6px rgba(13,17,23,.06);
  --shadow-lg:  0 12px 32px rgba(13,17,23,.12), 0 4px 12px rgba(13,17,23,.08);

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --t:          .2s cubic-bezier(.4,0,.2,1);
  --transition: var(--t);

  /* ── Layout. Was 240 / 250 / 260 across pages; standardised on 250. ─────── */
  --sidebar-w: 250px;
  --sw:        var(--sidebar-w);
}

/* Respect a reduced-motion preference rather than animating regardless. */
@media (prefers-reduced-motion: reduce){
  :root{ --t: 0s; --transition: 0s; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}