/* Remus IT — design tokens. Every colour, size and timing on the site comes from here. */
:root {
  /* Navy canvas */
  --navy-950: #08111f;
  --navy-900: #0b1628;
  --navy-800: #122037;
  --navy-700: #1b2b47; /* brochure navy */

  /* Gold: hairlines, eyebrows, numerals, one accent word. Never a fill, never body text. */
  --gold-500: #d4a94a;
  --gold-400: #e9c06a;
  --gold-soft: rgba(212, 169, 74, 0.38);
  --bronze-700: #8a6520; /* gold's stand-in for text on cream (passes AA) */

  /* Light chapters */
  --cream-50: #f6f1e8;
  --cream-100: #ede5d4;

  /* Text */
  --ivory: #f3ede2;
  --ivory-muted: #a9b2c3;
  --ink: #0f1a2b;
  --ink-muted: #4a566a;

  /* Hairlines */
  --line-dark: rgba(243, 237, 226, 0.12);
  --line-dark-strong: rgba(243, 237, 226, 0.22);
  --line-light: rgba(15, 26, 43, 0.14);
  --line-light-strong: rgba(15, 26, 43, 0.28);

  /* Type */
  --font-serif: 'Instrument Serif', 'Serif Fallback', Georgia, 'Times New Roman', serif;
  --font-sans: 'Instrument Sans', 'Sans Fallback', 'Helvetica Neue', Arial, sans-serif;

  --fs-display: clamp(3.6rem, 1.2rem + 6.2vw, 6.75rem);
  --fs-h2: clamp(2.125rem, 1rem + 3.6vw, 4rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  --fs-h4: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  --fs-quote: clamp(1.375rem, 0.95rem + 1.5vw, 2.125rem);
  --fs-numeral: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --fs-stat: clamp(2.5rem, 1.6rem + 3vw, 4.25rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;
  --fs-button: 0.9375rem;

  --lh-tight: 0.98;
  --lh-heading: 1.06;
  --lh-body: 1.6;
  --track-display: -0.02em;
  --track-eyebrow: 0.14em;

  /* Space */
  --gutter-x: clamp(1.25rem, 4vw, 4rem);
  --gap: clamp(1rem, 1.6vw, 1.5rem);
  --wrap: 1360px;
  --chapter-y: clamp(5.5rem, 4rem + 7vw, 10rem);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --nav-h: 80px;       /* slim bar once the page scrolls */
  --nav-h-top: 112px;  /* bar over the hero */
  --brand-mark: 76px;  /* logo at the top: ~2.5x the original 30px */
  --brand-word: 3.5rem;
  --brand-dock: 0.7;   /* logo scale in the slim bar (~1.75x the original) */
  --radius: 2px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 0.3s;
  --dur-hover: 0.4s;
  --dur-reveal: 0.9s;

  /* Layers */
  --z-content: 1;
  --z-nav: 50;
  --z-menu: 40;
  --z-skip: 100;
}

@media (max-width: 899px) {
  :root {
    --nav-h: 68px; --nav-h-top: 84px; --brand-dock: 0.8;
    /* as large as fits beside the call icon and Menu button, down to 320px wide */
    --brand-mark: clamp(36px, calc(16vw - 12px), 60px);
    --brand-word: clamp(1.75rem, calc(12.5vw - 0.6rem), 2.875rem);
  }
}