/* ============================================================
   Bright Brush primitives
   Design tokens + small utilities shared by every page.
   Loaded BEFORE each page's own styles; pages keep their own
   colour system, these tokens are namespaced so nothing clashes.
   ============================================================ */

:root {
  /* --- Spacing scale (rem) --- */
  --space-3xs: 0.125rem; /*  2px */
  --space-2xs: 0.25rem;  /*  4px */
  --space-xs:  0.5rem;   /*  8px */
  --space-sm:  0.75rem;  /* 12px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */

  /* --- Radii (rem) --- */
  --radius-2xs: 0.25rem;
  --radius-xs:  0.5rem;
  --radius-s:   0.75rem;
  --radius-m:   1rem;
  --radius-l:   1.5rem;
  --radius-round: 999px;

  /* --- Type scale (rem) --- */
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-md:  1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

  /* --- Motion --- */
  --dur-fast: 160ms;
  --dur-med:  320ms;
  --dur-slow: 640ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Scroll-reveal animation (driven by js/motion.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Header gains a soft shadow once the page scrolls (js/motion.js) */
header.is-scrolled,
.site-header.is-scrolled {
  box-shadow: 0 0.5rem 1.5rem rgba(28, 27, 26, 0.12);
  transition: box-shadow var(--dur-med) var(--ease-out);
}

/* ---------- Boxicons niceties ---------- */
.bx {
  vertical-align: -0.125em;
}
a > .bx:first-child,
button > .bx:first-child {
  margin-right: var(--space-2xs);
}

/* ---------- Focus visibility ---------- */
:focus-visible {
  outline: 0.1875rem solid currentColor;
  outline-offset: 0.1875rem;
  border-radius: var(--radius-2xs);
}

/* ---------- Tiny layout utilities ---------- */
.stack > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.u-center { text-align: center; }
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-xl { margin-top: var(--space-xl); }
.u-hidden { display: none !important; }

/* ---------- Reduced motion: calm everything down ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}