/*
  RMC design tokens.
  Layout, spacing, radius and motion come from the Figma Make mockup "Luxury Group Transit Website"
  (ZOLl1lwB51NoAWzvcEj9R7). Colour and heading type changed 2026-10-22 to the graphite + lime palette
  (color.adobe.com: #363F48 slate, #262626 graphite, #6A6A6A grey, #EFEFEF light, #BFD730 lime)
  and Inter SemiBold headings.

  The colour token NAMES are kept from the first palette so nothing downstream had to change:
  "navy" now holds graphite and slate, "cream/stone" hold the light greys, "ember" holds lime.
  Derived values (not in the five swatches) are marked; each exists for contrast or a state.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,600;1,400&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* Colour: brand */
  --color-navy-950: #262626;   /* graphite: footer */
  --color-navy-900: #262626;   /* graphite: deepest sections, hero base, modal */
  --color-navy-800: #363f48;   /* slate: primary ink on light, dark sections */
  --color-navy-700: #4a535c;   /* derived slate: icons, image placeholders */
  --color-slate-500: #6a6a6a;  /* grey: secondary text on light (4.7:1 on #efefef) */

  --color-cream-50:  #efefef;  /* light: page ground */
  --color-stone-100: #efefef;  /* light: ink on dark */
  --color-stone-200: #d6d6d6;  /* derived: borders */

  --color-ember-500: #bfd730;  /* lime: accent on dark grounds */
  --color-ember-600: #bfd730;  /* lime: primary button fill, always with graphite text (9.4:1) */
  --color-ember-700: #a9c021;  /* derived: button hover */
  --color-ember-text: #5a6610; /* derived deep lime: accent text on light (5.5:1). Lime itself is 1.4:1 there. */

  --color-lime-500: #bfd730;   /* lime: positive marks */
  --color-cognac-600: #4a535c; /* derived slate: photo placeholder */

  --color-white: #ffffff;

  /* Colour: roles (light surface is the default) */
  --surface: var(--color-cream-50);
  --surface-alt: var(--color-white); /* steps up from #efefef; keeps #6a6a6a text at 5.4:1 */
  --surface-raised: rgba(255, 255, 255, 0.72);
  --ink: var(--color-navy-800);
  --ink-muted: var(--color-slate-500);
  --accent: var(--color-ember-text);
  --border: rgba(54, 63, 72, 0.1);
  --focus: var(--color-ember-text); /* lime is invisible as a ring on light grounds */

  /* Typography */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Outfit', system-ui, sans-serif;

  --text-2xs: 0.65rem;   /* badges */
  --text-xs: 0.75rem;    /* labels, stat captions */
  --text-sm: 0.875rem;   /* card body, list items */
  --text-base: 1rem;     /* body */
  --text-lg: 1.15rem;    /* hero lead */
  --text-xl: 1.4rem;     /* card titles */
  --text-2xl: 1.8rem;    /* stat values */
  --text-h2: clamp(2rem, 4vw, 3rem);
  --text-h1: clamp(2.8rem, 6vw, 5rem);

  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-body: 1.7;

  --tracking-display: -0.025em;
  --tracking-label: 0.14em;
  --tracking-button: 0.05em;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --section-y: 7rem;
  --container: 80rem;    /* 1280px */
  --gutter: 1.5rem;

  /* Radius */
  --radius-xs: 2px;      /* inputs, tags */
  --radius-sm: 10px;     /* buttons */
  --radius-md: 18px;     /* cards, nav shell */
  --radius-lg: 26px;     /* featured cards, spotlight */
  --radius-full: 999px;

  /* Elevation */
  --shadow-card: 0 12px 40px rgba(38, 38, 38, 0.07);
  --shadow-card-hover: 0 22px 55px rgba(38, 38, 38, 0.14);
  --shadow-dark: 0 14px 35px rgba(0, 0, 0, 0.22);
  --shadow-button: 0 4px 14px rgba(0, 0, 0, 0.18); /* neutral: a lime-tinted shadow reads as a glow on dark grounds */

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --lift: -3px;          /* hover lift for interactive cards; keep it quiet */
}

/* Dark surfaces: put .on-dark (or data-surface="dark") on any navy section.
   The hero is always dark, so it gets these roles too. */
.on-dark,
[data-surface="dark"],
.hero {
  --surface: var(--color-navy-800);
  --surface-alt: var(--color-navy-900);
  --surface-raised: rgba(239, 239, 239, 0.04);
  --ink: var(--color-stone-100);
  --ink-muted: rgba(239, 239, 239, 0.7); /* never below 0.6: fails AA */
  --accent: var(--color-ember-500);
  --border: rgba(239, 239, 239, 0.14);
  --focus: var(--color-ember-500);
}

/* Sections breathe less on smaller screens so content isn't lost between bands. */
@media (max-width: 960px) { :root { --section-y: 5.5rem; } }
@media (max-width: 640px) { :root { --section-y: 4.5rem; } }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur-base: 0s; --lift: 0; }
}