:root {
  /* ===== Colour — sampled from Agendas Brunei's own artwork/office, see BRAND-SPEC.md ===== */
  --color-royal: #0C389B;
  --color-royal-deep: #071A4A;
  --color-gold: #C99700;      /* logotype + rules + fills ONLY, never text on light */
  --color-bronze: #9A5D04;    /* accessible gold-family text on light grounds */
  --color-ink: #14162E;
  --color-paper: #F6F2EA;
  --color-white: #FFFFFF;
  --color-haze: #C3CEEA;
  /* Semantic states. Deliberately outside the brand ramp — a warning that reads
     as brand colour does not register as a warning. Both AA on --color-white. */
  --color-alert: #A32217;
  --color-success: #1A7A3A;
  --color-success-ink: #14602E;

  /* ===== Type — three roles, per design-library/TYPE.md ===== */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --font-script: 'Sacramento', cursive;   /* Ardha wordmark + strapline ONLY */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* data ONLY — prices, dates, phone, hours */

  /* Size, with leading + tracking bound to the token (design-library/LAYOUT.md §4).
     body/UI: 1.4–1.5, ls 0 · 20–30px: 1.2, ls -0.01em · 36–44px: 1.05–1.15, ls -0.02em
     48px+: 0.85–0.95, ls -0.03 to -0.04em — the leading crosses below 1.0 on purpose. */
  --fs-xs:  0.8125rem; --lh-xs:  1.45; --ls-xs:  0;
  --fs-sm:  0.9375rem; --lh-sm:  1.5;  --ls-sm:  0;
  --fs-base: 1rem;     --lh-base: 1.5; --ls-base: 0;
  --fs-md:  1.125rem;  --lh-md:  1.45; --ls-md:  0;
  --fs-lg:  1.375rem;  --lh-lg:  1.2;  --ls-lg:  -0.01em;
  --fs-xl:  1.75rem;   --lh-xl:  1.2;  --ls-xl:  -0.01em;
  --fs-2xl: 2.25rem;   --lh-2xl: 1.12; --ls-2xl: -0.02em;
  --fs-3xl: 3rem;      --lh-3xl: 0.92; --ls-3xl: -0.03em;
  --fs-4xl: 3.75rem;   --lh-4xl: 0.88; --ls-4xl: -0.035em;

  /* Fluid display size for the opening headline — not a fixed token, but the same
     below-1.0-leading / tight-tracking rule applies once it crosses 48px. */
  --fs-hero: clamp(2.5rem, 7.5vw, 5rem);
  --lh-hero: 0.92;
  --ls-hero: -0.035em;

  /* ===== Spacing — two-axis ladder, design-library/LAYOUT.md §1 =====
     Component gaps cap at 28px. Section gaps start at 32px. Nothing lives between —
     that gap is what keeps the page reading as structured rather than soupy. */
  --space-xs: 0.25rem;  --space-s: 0.375rem; --space-sm: 0.5rem;
  --space-m:  0.75rem;  --space-l: 1.125rem; --space-xl: 1.5rem;

  --section-s: 2rem;  --section-sm: 2.5rem; --section-m: 3.75rem;
  --section-l: 5rem;  --section-xl: 7.5rem;

  /* ===== Radii + shadow ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-soft: 0 12px 32px rgba(7, 26, 74, 0.12);
  --shadow-card: 0 4px 16px rgba(7, 26, 74, 0.08);

  /* ===== Motion — measured off jitter.video + xapobank.com, design-library/MOTION.md =====
     Four durations, four curves. Pick by what's moving, not by taste. */
  --dur-state: 150ms;   /* colour, opacity, border — a tap being acknowledged */
  --dur-ui:    250ms;   /* hover, focus, small transform — the interface responding */
  --dur-enter: 400ms;   /* an element arriving on screen */
  --dur-hero:  800ms;   /* the one big move on the page. Used once. */

  --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94); /* the default. ~90% of moves. */
  --ease-out:  cubic-bezier(0.19, 1, 0.22, 1);       /* slow, expensive settle. Big reveals only. */
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);           /* things leaving. Rare. */
  --ease-pop:  linear(                               /* overshoot spring — the signature move */
    0 0%, 0.8513 5%, 1.2484 10%, 1.3862 13%, 1.4709 16%, 1.5182 20%, 1.52 21%,
    1.5101 24%, 1.4817 27%, 1.4254 31%, 1.3633 35%, 1.3188 38%, 1.278 41%,
    1.2412 44%, 1.2083 47%, 1.1789 50%, 1.1296 55%, 1.0909 62%, 1.0654 67%,
    1.0451 72%, 1.032 76%, 1.0193 81%, 1.0101 86%, 1.005 90%, 1.0018 94%, 1 100%
  );

  --dist: 16px; /* every entrance travels this far. Never 40px, never 80px. */

  /* ===== Layout ===== */
  --container-max: 1200px;
  --gutter: var(--space-l);
}

@media (min-width: 768px) {
  :root {
    --space-s: 0.5rem;  --space-sm: 0.625rem; --space-m: 0.875rem;
    --space-l: 1.125rem; --space-xl: 1.625rem;
    --section-s: 2.25rem; --section-sm: 3.125rem; --section-m: 4.375rem;
    --section-l: 6.25rem; --section-xl: 9.375rem;

    --gutter: var(--space-xl);
    --fs-3xl: 3.5rem;
    --fs-4xl: 4.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --space-s: 0.5rem;  --space-sm: 0.75rem; --space-m: 1rem;
    --space-l: 1.25rem; --space-xl: 1.75rem;
    --section-s: 2.5rem; --section-sm: 3.75rem; --section-m: 5rem;
    --section-l: 7.5rem; --section-xl: 11.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}