/* =========================================================
   NSIRS DESIGN TOKENS
   Single source of truth for colour, spacing, type and
   elevation across the public site and the application.

   COLOUR
   Sampled directly from the NSIRS crest (NIRS_LOGO.png):
     Map silhouette / bars ... #165A35
     "Unity and Loyalty" ribbon ... #E8B413
     Coat-of-arms eagle ... #AA3126

   SPACING
   Strict 8-point grid. Every margin, padding, gap, radius
   and component dimension resolves to a multiple of 8px,
   with 4px available as the single half-step for optical
   adjustments (icon insets, badge padding, hairlines).
========================================================= */

:root {

  /* ---------------------------------------------------
     BRAND GREEN — derived from the crest's #165A35
  --------------------------------------------------- */
  --brand-950: #041A12;
  --brand-900: #06251A;
  --brand-800: #0A3323;
  --brand-700: #0E432B;
  --brand-600: #125230;
  --brand-500: #165A35;   /* logo green */
  --brand-400: #1E7345;
  --brand-300: #2E9059;
  --brand-200: #63B489;
  --brand-100: #A9D8BF;
  --brand-050: #E8F4EE;

  /* ---------------------------------------------------
     GOLD — from the crest ribbon #E8B413
  --------------------------------------------------- */
  --gold-700: #8A6A08;
  --gold-600: #A8820A;
  --gold-500: #C99A0F;
  --gold-400: #E8B413;   /* logo gold */
  --gold-300: #F2CB55;
  --gold-200: #F8E0A0;
  --gold-050: #FDF7E6;

  /* ---------------------------------------------------
     ACCENT RED — crest eagle, used only for alerts
  --------------------------------------------------- */
  --red-600: #8E2419;
  --red-500: #AA3126;   /* logo red */
  --red-100: #F7E2DF;

  --amber-500: #B8791F;
  --amber-100: #FBEFD8;

  /* ---------------------------------------------------
     NEUTRALS — green-tinted, not pure grey, so they sit
     naturally beside the brand green
  --------------------------------------------------- */
  --ink-900: #101A15;
  --ink-800: #1A2620;
  --ink-700: #2B3B33;
  --ink-600: #46564D;
  --ink-500: #63736A;
  --ink-400: #8A9992;
  --ink-300: #B6C2BB;
  --ink-200: #D8E1DB;
  --ink-100: #EAF0EC;
  --ink-050: #F4F8F5;
  --white: #FFFFFF;

  /* ---------------------------------------------------
     SEMANTIC
  --------------------------------------------------- */
  --bg-page: var(--white);
  --bg-tint: var(--ink-050);
  --bg-surface: var(--white);
  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary: var(--ink-400);
  --text-on-dark: var(--white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.72);

  /* ---------------------------------------------------
     SPACING — 8-POINT GRID
     --sp-0h is the only half-step (4px).
  --------------------------------------------------- */
  --sp-0h: 4px;
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-7:  56px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-14: 112px;
  --sp-16: 128px;

  /* ---------------------------------------------------
     RADII — 8-point aligned
  --------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---------------------------------------------------
     TYPE
     Sizes chosen so line-heights land on 4/8px multiples.
  --------------------------------------------------- */
  --font-head: Georgia, "Times New Roman", serif;
  --font-body: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --text-xs:   12px;  --lh-xs:   16px;
  --text-sm:   14px;  --lh-sm:   24px;
  --text-base: 16px;  --lh-base: 24px;
  --text-lg:   20px;  --lh-lg:   32px;
  --text-xl:   24px;  --lh-xl:   32px;
  --text-2xl:  32px;  --lh-2xl:  40px;
  --text-3xl:  40px;  --lh-3xl:  48px;
  --text-4xl:  48px;  --lh-4xl:  56px;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  /* ---------------------------------------------------
     ELEVATION — tinted with brand green rather than
     neutral black, so shadows feel part of the palette
  --------------------------------------------------- */
  --shadow-sm:
    0 1px 2px rgba(6, 37, 26, 0.06),
    0 2px 8px rgba(6, 37, 26, 0.04);

  --shadow-md:
    0 2px 4px rgba(6, 37, 26, 0.06),
    0 8px 24px rgba(6, 37, 26, 0.08);

  --shadow-lg:
    0 4px 8px rgba(6, 37, 26, 0.08),
    0 16px 40px rgba(6, 37, 26, 0.12);

  --shadow-gold:
    0 8px 24px rgba(232, 180, 19, 0.32);

  /* ---------------------------------------------------
     GRADIENTS
     Three-stop, off-axis (156deg) so the light source
     reads as top-left and the surface looks curved
     rather than flatly interpolated.
  --------------------------------------------------- */
  --grad-gold:
    linear-gradient(156deg,
      var(--gold-300) 0%,
      var(--gold-400) 42%,
      var(--gold-500) 100%);

  --grad-gold-hover:
    linear-gradient(156deg,
      #F7D97A 0%,
      var(--gold-300) 46%,
      var(--gold-400) 100%);

  --grad-green:
    linear-gradient(156deg,
      var(--brand-400) 0%,
      var(--brand-500) 44%,
      var(--brand-700) 100%);

  --grad-green-hover:
    linear-gradient(156deg,
      var(--brand-300) 0%,
      var(--brand-400) 46%,
      var(--brand-600) 100%);

  /* Deep canvas for hero and footer — radial warmth over
     a linear base so large dark areas are not flat */
  --grad-canvas:
    radial-gradient(
      120% 100% at 12% 0%,
      rgba(46, 144, 89, 0.22) 0%,
      transparent 58%),
    linear-gradient(156deg,
      var(--brand-800) 0%,
      var(--brand-900) 58%,
      var(--brand-950) 100%);

  --grad-surface:
    linear-gradient(180deg,
      var(--white) 0%,
      var(--ink-050) 100%);

  /* ---------------------------------------------------
     MOTION
  --------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-mid: 280ms;
  --dur-slow: 560ms;

  /* ---------------------------------------------------
     LAYOUT
  --------------------------------------------------- */
  --container: 1184px;   /* 148 × 8 */
  --gutter: var(--sp-3);
  --header-h: 80px;      /* 10 × 8 */
  --sidebar-w: 264px;    /* 33 × 8 */
}


/* =========================================================
   SHARED PRIMITIVES
========================================================= */

.u-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ---------------------------------------------------------
   BUTTONS
   The sheen is a diagonal highlight that sweeps across on
   hover — it reads as light moving over a raised surface,
   which is what separates these from a flat filled button.
--------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 48px;                 /* 6 × 8 */
  padding: var(--sp-2) var(--sp-4);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-mid) var(--ease),
    box-shadow var(--dur-mid) var(--ease),
    background var(--dur-mid) var(--ease);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.42) 42%,
    transparent 64%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.btn:hover::after {
  transform: translateX(120%);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}

/* Gold — primary action */
.btn-primary {
  background: var(--grad-gold);
  color: var(--brand-900);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    var(--shadow-md);
}

.btn-primary:hover {
  background: var(--grad-gold-hover);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    var(--shadow-gold);
}

/* Green — secondary solid */
.btn-green {
  background: var(--grad-green);
  color: var(--white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    var(--shadow-md);
}

.btn-green:hover {
  background: var(--grad-green-hover);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    var(--shadow-lg);
}

/* Ghost — on dark backgrounds */
.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(8px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

/* Outline — on light backgrounds */
.btn-outline {
  background: transparent;
  color: var(--brand-600);
  border: 1px solid var(--border-strong);
}

.btn-outline:hover {
  background: var(--brand-050);
  border-color: var(--brand-400);
  color: var(--brand-700);
}


@media (prefers-reduced-motion: reduce) {

  .btn,
  .btn::after {
    transition: none;
  }

  .btn:hover {
    transform: none;
  }

  .btn:hover::after {
    transform: translateX(-120%);
  }

}