/* R4 Retreats brand tokens — overrides the Industry design system.
   Values from R4_Retreats_Web_Designer_Handoff.docx §3 and §4.
   Change a value here and every page follows. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  /* Palette */
  --r4-steel: #1D2831;
  --r4-pine: #2E4A38;
  --r4-amber: #EE8E22;
  --r4-stone: #EAE2DB;

  /* Industry token overrides */
  --color-bg: #FFFFFF;
  --color-surface: var(--r4-stone);
  --color-text: var(--r4-steel);
  --color-divider: color-mix(in srgb, var(--r4-steel) 16%, transparent);

  --color-accent: var(--r4-amber);
  --color-accent-100: color-mix(in srgb, var(--r4-amber) 12%, #FFFFFF);
  --color-accent-200: color-mix(in srgb, var(--r4-amber) 24%, #FFFFFF);
  --color-accent-300: color-mix(in srgb, var(--r4-amber) 40%, #FFFFFF);
  --color-accent-400: color-mix(in srgb, var(--r4-amber) 60%, #FFFFFF);
  --color-accent-500: var(--r4-amber);
  --color-accent-600: color-mix(in srgb, var(--r4-amber) 88%, var(--r4-steel));
  --color-accent-700: color-mix(in srgb, var(--r4-amber) 62%, var(--r4-steel));
  --color-accent-800: color-mix(in srgb, var(--r4-amber) 34%, var(--r4-steel));
  --color-accent-900: var(--r4-steel);

  --color-neutral-100: #F6F4F2;
  --color-neutral-200: color-mix(in srgb, var(--r4-stone) 55%, #FFFFFF);
  --color-neutral-300: var(--r4-stone);
  --color-neutral-400: color-mix(in srgb, var(--r4-steel) 32%, #FFFFFF);
  --color-neutral-600: color-mix(in srgb, var(--r4-steel) 58%, #FFFFFF);
  --color-neutral-700: color-mix(in srgb, var(--r4-steel) 74%, #FFFFFF);
  --color-neutral-800: color-mix(in srgb, var(--r4-steel) 88%, #FFFFFF);

  /* Typography — Montserrat is the brand typeface (handoff §4) */
  --font-heading: "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;
}

/* Amber fails small-text contrast on white, so links carry brand dark by
   default and use amber only on interaction (handoff §7). */
a { color: var(--r4-steel); }
a:hover { color: var(--r4-amber); }

/* The ghost button inherits the raw accent from the system; same rule applies. */
.btn-ghost { color: var(--color-accent-700); }
.btn-ghost:hover { color: var(--r4-amber); }

/* Logo: never stretched, never filtered, always its own aspect ratio (§2, §7) */
.r4-logo { display: block; height: auto; width: auto; }
.r4-logo-link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }

/* Wide logo letterspacing belongs to the artwork, not to body copy (§4) */
body { letter-spacing: 0; }