/* ============================================================
   BASE.CSS — Mercer Yachting Design Tokens, Reset & Typography
   ============================================================ */

/* --- Design Tokens --- */
:root {
  color-scheme: light only;

  /* Colour — Dark palette */
  --midnight-ocean: #0A1628;
  --navy-deep: #0e131d;
  --surface: #0d1117;
  --surface-raised: #161b22;
  --surface-overlay: #1c2333;

  /* Colour — Brand gold */
  --ritz-gold: #C9A962;
  --ritz-gold-hover: #d4bc7a;
  --ritz-gold-dark: #a88a45;
  --ritz-gold-glow: rgba(201,169,98,0.15);

  /* Colour — Text */
  --text-primary: #e6edf3;
  --text-secondary: #b0bec5;
  --text-muted: #6d7f94;

  /* Colour — Borders & shadows */
  --border-light: rgba(255,255,255,0.06);
  --border-glow: rgba(201,169,98,0.2);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset,
                 0 -1px 0 rgba(0,0,0,0.4) inset,
                 0 20px 60px rgba(0,0,0,0.4);
  --shadow-card-hover: 0 1px 0 rgba(255,255,255,0.06) inset,
                       0 -1px 0 rgba(0,0,0,0.5) inset,
                       0 30px 80px rgba(0,0,0,0.5),
                       0 20px 60px rgba(201,169,98,0.12);

  /* Colour — Light surface */
  --light-bg: #f8f9fa;
  --light-bg-alt: #f0f2f5;
  --light-text: #1a1a1a;
  --light-text-secondary: #4a5568;
  --light-text-muted: #5a6a7a;
  --light-border: #e8ecf0;

  /* Typography */
  --serif: 'Playfair Display', serif;
  --sans: 'Inter', sans-serif;

  /* Layout */
  --utility-nav-height: 33px;
  --main-nav-height: 73px;
  --header-total-height: calc(var(--utility-nav-height) + var(--main-nav-height));
  --container-max: 1200px;
  --gutter: 40px;
}

/* --- Reset --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--light-text);
  background: #ffffff;
  overflow-x: hidden;
  line-height: 1.6;
}

img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { text-decoration: none; }

/* --- Focus --- */
*:focus-visible {
  outline: 2px solid var(--ritz-gold);
  outline-offset: 2px;
}

/* --- Skip Link --- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ritz-gold);
  color: var(--midnight-ocean);
  padding: 8px 16px;
  font-weight: 600;
  z-index: 10000;
}
.skip-link:focus { top: 0; }

/* --- Animation --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fadeInUp 0.6s ease forwards; }

/* --- Stretched Link Pattern --- */
.card--clickable { position: relative; }
.stretched-link  { position: absolute; inset: 0; z-index: 1; }
.card-cta        { position: relative; z-index: 2; }