/* ==========================================================================
   RCG design tokens
   Palette comes from the Rheniumcrest crest (navy + silver); the warm rust
   accent carries over from the reference site and is reserved for CTAs and
   rules, never for large fills.
   ========================================================================== */

:root {
  /* ---- brand: navy ---------------------------------------------------- */
  --navy-900: #071b36;
  --navy-800: #0a2540; /* primary */
  --navy-700: #123255;
  --navy-600: #1b4270;
  --navy-500: #2a5688;

  /* ---- brand: silver / slate ------------------------------------------ */
  --slate-700: #3d4a5a;
  --slate-600: #5a6a7c; /* secondary text on light */
  --slate-400: #8a99a8;
  --silver-300: #c3cbd5;
  --silver-200: #e2e7ed;
  --silver-100: #f1f4f7;

  /* ---- accent: rust (CTA only) ---------------------------------------- */
  --rust-700: #a83a17;
  --rust-600: #c4441e;
  --rust-500: #e15320; /* primary CTA */
  --rust-400: #e68057;
  --rust-100: #fbe4da;
  --rust-50: #faf3ef;

  /* ---- neutrals -------------------------------------------------------- */
  --ink: #1c242e;
  --body: #5b6675;
  --muted: #8b94a1;
  --paper: #ffffff;
  --paper-alt: #f5f6f8;
  --line: #e2e7ed;
  --line-strong: #c3cbd5;

  /* ---- status ---------------------------------------------------------- */
  --success: #1c7a4f;
  --success-bg: #e6f4ed;
  --danger: #b3261e;
  --danger-bg: #fdeceb;
  --warning: #8a5a00;
  --warning-bg: #fdf3e0;
  --info: #12507d;
  --info-bg: #e8f1f8;

  /* ---- semantic roles -------------------------------------------------- */
  --c-bg: var(--paper);
  --c-bg-alt: var(--paper-alt);
  --c-bg-invert: var(--navy-800);
  --c-text: var(--ink);
  --c-text-soft: var(--body);
  --c-text-invert: #ffffff;
  --c-text-invert-soft: var(--silver-300);
  --c-primary: var(--navy-800);
  --c-accent: var(--rust-500);
  --c-border: var(--line);
  --c-focus: var(--rust-500);

  /* ---- typography ------------------------------------------------------ */
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --fs-hero: clamp(2.25rem, 1.35rem + 3.8vw, 4rem); /* 36 -> 64 */
  --fs-h1: clamp(2rem, 1.3rem + 3vw, 3.5rem); /* 32 -> 56 */
  --fs-h2: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); /* 28 -> 48 */
  --fs-h3: clamp(1.25rem, 1.08rem + 0.7vw, 1.5rem); /* 20 -> 24 */
  --fs-h4: 1.125rem;
  --fs-lg: 1.125rem;
  --fs-base: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.75;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  --ls-hero: -0.02em;
  --ls-eyebrow: 0.18em;
  --ls-caps: 0.08em;

  /* ---- spacing (4px base) ---------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5rem;
  --sp-10: 7rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* ---- geometry -------------------------------------------------------- */
  /* The reference language is square-cornered; only pills and avatars round. */
  --radius: 0px;
  --radius-sm: 0px;
  --radius-pill: 999px;
  --radius-round: 50%;

  --border-w: 1px;
  --border-w-strong: 2px;

  /* ---- elevation ------------------------------------------------------- */
  --shadow-hard: 8px 8px 0 rgba(10, 37, 64, 0.1);
  --shadow-hard-sm: 5px 5px 0 rgba(10, 37, 64, 0.1);
  --shadow-hard-accent: 6px 6px 0 rgba(225, 83, 28, 0.18);
  --shadow-card: 0 2px 14px rgba(10, 37, 64, 0.07);
  --shadow-card-hover: 0 10px 30px rgba(10, 37, 64, 0.13);
  --shadow-header: 0 1px 0 rgba(10, 37, 64, 0.08);
  --ring-focus: 0 0 0 3px rgba(225, 83, 28, 0.35);

  /* ---- motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* ---- layers ---------------------------------------------------------- */
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-overlay: 290;
  --z-float: 400;
  --z-toast: 500;
}

/* Sections rendered on the navy ground flip the semantic roles rather than
   restating every colour at the call site. */
.on-invert {
  --c-bg: var(--navy-800);
  --c-bg-alt: var(--navy-700);
  --c-text: #ffffff;
  --c-text-soft: var(--silver-300);
  --c-border: rgba(255, 255, 255, 0.16);
  --c-primary: #ffffff;
  color: var(--c-text);
  background-color: var(--c-bg);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}