/* ==========================================================================
   BASE — CSS custom properties, reset, global typography
   ========================================================================== */

/* Theme: dark is the default. The <html data-theme="light"> attribute is set by
   the inline script in index.html (before first paint, so there is no flash)
   and switches the whole palette below. Everything else in the stylesheets
   reads these variables — no component needs a light-mode rule of its own. */

:root{
  --bg: #0B0D10;
  --bg-alt: #14171B;
  --bg-raised: #1B1F24;
  --line: rgba(237,237,231,0.12);
  --text: #EDEDE7;
  --text-strong: #FFFFFF;   /* hero headline */
  --text-soft: #D8D8D2;     /* slightly dimmer than --text */
  --text-muted: #9B9C97;
  --text-faint: #85867F;    /* placeholders, footer fine print */
  --brass: #C6A15B;
  --brass-soft: rgba(198,161,91,0.14);
  --brass-line: rgba(198,161,91,0.45);
  --brass-hover: #D8B876;
  --on-brass: #0B0D10;      /* text on a filled brass button */
  --scrim-rgb: 11,13,16;    /* header + hero gradients over photography */
  /* Scrim opacities. Light mode needs a denser veil: dark UI text over the
     hero photo would otherwise be unreadable. */
  --header-scrim: 0.85;
  --hero-scrim-1: 0.35;
  --hero-scrim-2: 0.55;
  --hero-scrim-3: 0.96;
  --logo-filter: brightness(0) invert(1);
  --serif: 'Fraunces', serif;
  --sans: 'Inter', sans-serif;
}

:root[data-theme="light"]{
  --bg: #FAF9F6;
  --bg-alt: #F1EFE9;
  --bg-raised: #E8E5DD;
  --line: rgba(20,23,28,0.14);
  --text: #14171B;
  --text-strong: #0B0D10;
  --text-soft: #33373D;
  --text-muted: #5C6068;
  --text-faint: #6A6D74;
  /* Darker brass — the dark-mode gold fails contrast on a light background. */
  --brass: #80621F;
  --brass-soft: rgba(138,106,36,0.10);
  --brass-line: rgba(138,106,36,0.40);
  --brass-hover: #6E5419;
  --on-brass: #FFFFFF;
  --scrim-rgb: 250,249,246;
  --header-scrim: 0.95;
  --hero-scrim-1: 0.72;
  --hero-scrim-2: 0.84;
  --hero-scrim-3: 0.97;
  --logo-filter: brightness(0);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ font-size:62.5%; scroll-behavior:smooth; } /* 1rem = 10px */

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  transition:background-color .25s ease, color .25s ease;
  font-size:1.6rem;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1.1;
}

:focus-visible{ outline:0.2rem solid var(--brass); outline-offset:0.2rem; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}