/* ==========================================================================
   LUkraine Design System v1.2 — tokens, base elements, BEM components.
   Naming: .lu-block__element--modifier (BEM). One class per rule where
   possible, to keep specificity low and overrides predictable.
   ========================================================================== */

:root{
  /* --- Colour tokens --- */
  --lu-red:#DD3F39;        /* Humanitarian pillar */
  --lu-blue:#0295D6;       /* Education pillar */
  --lu-purple:#8E44AD;     /* Youth pillar */
  --lu-gold:#F9A027;       /* Cultural Bridges & Advocacy pillar */
  --lu-dark:#16384A;       /* Primary text / dark backgrounds */
  --lu-beige:#FFFCFA;      /* Page background */
  --lu-muted:#5C737F;      /* Secondary text, passes WCAG AA on --lu-beige */
  --lu-border:#E6EAEC;

  --pillar-humanitarian:var(--lu-red);
  --pillar-education:var(--lu-blue);
  --pillar-youth:var(--lu-purple);
  --pillar-culture:var(--lu-gold);

  --font-heading:'Raleway',Arial,sans-serif;
  --font-body:'Inter',Arial,sans-serif;
  --lh-body:1.55;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;

  --radius-sm:6px; --radius-md:10px; --radius-full:999px;
  --transition-fast:120ms ease;
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:0.001ms !important; animation-duration:0.001ms !important; }
}

body{
  font-family:var(--font-body);
  color:var(--lu-dark);
  background:var(--lu-beige);
  line-height:var(--lh-body);
}
h1,h2,h3{ font-family:var(--font-heading); }

a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--lu-blue);
  outline-offset:2px;
}

.lu-btn{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-sm);
  border:1px solid var(--lu-dark);
  background:var(--lu-dark);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:transform var(--transition-fast), opacity var(--transition-fast);
  text-decoration:none;
}
.lu-btn:hover{ opacity:.9; }
.lu-btn:active{ transform:scale(.98); }

.lu-btn--ghost{
  background:transparent;
  color:var(--lu-dark);
  border-color:var(--lu-border);
}
.lu-btn--ghost:hover{ background:var(--lu-border); opacity:1; }
.lu-btn--sm{ padding:var(--sp-1) var(--sp-2); font-size:.85em; }

.lu-card{
  background:#fff;
  border:1px solid var(--lu-border);
  border-radius:var(--radius-md);
  padding:var(--sp-4);
}
.lu-card__title{ margin:0 0 var(--sp-2); font-family:var(--font-heading); }

.lu-tag{
  display:inline-block;
  font-size:.75em;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:2px 7px;
  border-radius:5px;
  background:var(--lu-border);
  color:var(--lu-dark);
}

.lu-pill{
  display:inline-block;
  padding:var(--sp-1) var(--sp-3);
  border-radius:var(--radius-full);
  color:#fff;
  font-weight:600;
}
.lu-pill--humanitarian{ background:var(--pillar-humanitarian); }
.lu-pill--education{ background:var(--pillar-education); }
.lu-pill--youth{ background:var(--pillar-youth); }
.lu-pill--culture{ background:var(--pillar-culture); color:var(--lu-dark); }

.lu-swatch{
  width:26px; height:26px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 0 1px var(--lu-border);
  cursor:pointer;
  opacity:.6;
  transition:transform var(--transition-fast), opacity var(--transition-fast);
}
.lu-swatch:hover,
.lu-swatch--active{ opacity:1; transform:scale(1.15); }

/* ==========================================================================
   Accessibility notes
   - --lu-muted on --lu-beige and --lu-dark on #fff both pass WCAG AA
     (4.5:1) for normal text. Verify any new colour pairing before shipping.
   - --lu-gold on white fails AA for small text: always pair with dark
     text (see .lu-pill--culture) or use it as a background swatch only.
   - Keep focus-visible outlines. Never set outline:none without an
     equally visible custom focus style in its place.
   ========================================================================== */