/* ARU design tokens. Every colour, space, radius, shadow and type value lives here.
   Variants override only the block scoped to [data-theme]. */
:root {
  /* Brand. The names stay from ABR (navy, gold) so every rule keeps working; the values are ARU spruce and copper. */
  --navy: #0E2A25;
  --navy-900: #091D19;
  --navy-800: #13362F;
  --navy-700: #1B463D;
  --navy-600: #2B5A4F;
  --gold: #D88B5A;
  --gold-300: #F1D2BC;
  --gold-100: #FBEDE3;
  --gold-ink: #9A4D23;      /* copper for text on light backgrounds, 6.1:1 on white */
  --ivory: #F1F5F3;
  --white: #FFFFFF;
  --slate: #4A5E58;
  --slate-300: #A9C0B8;     /* secondary text on spruce */
  --line: #DCE5E1;
  --line-dark: rgba(255, 255, 255, .14);
  --success: #1F7A55;
  --success-bg: #E5F3EC;
  --danger: #A63A32;
  --danger-bg: #F9E9E7;

  /* Type */
  --font-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-h3: 1.25rem;
  --fs-h2: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  /* Space, multiples of 4 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 80px; --s-11: 112px;

  /* Layout */
  --wrap: 1200px;
  --gutter: 16px;
  --section-y: 48px;
  --header-h: 72px;

  /* Shape */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(14, 42, 37, .06), 0 2px 8px rgba(14, 42, 37, .05);
  --shadow-md: 0 4px 12px rgba(14, 42, 37, .07), 0 16px 32px rgba(14, 42, 37, .08);
  --shadow-lg: 0 8px 24px rgba(9, 29, 25, .16), 0 32px 64px rgba(9, 29, 25, .24);

  /* Motion */
  --ease: cubic-bezier(.22, .8, .24, 1);
  --t-fast: 160ms;
  --t-med: 280ms;
  --t-reveal: 640ms;
  --focus: 0 0 0 3px var(--white), 0 0 0 5px var(--navy);
}

@media (min-width: 768px) { :root { --gutter: 32px; --section-y: 64px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; --section-y: 80px; } }

[data-theme="institutional"] {
  --t-reveal: 900ms;
  --fw-h1: 500;
  --fw-h2: 500;
  --track-h: -.022em;
}
[data-theme="saas"] {
  --t-reveal: 480ms;
  --fw-h1: 800;
  --fw-h2: 800;
  --track-h: -.032em;
  --mist: #F3F5F9;
  --line: #E4E8EF;
  --header-h: 64px;
}