/* base.css — resets, root variables, layout primitives
   Per V1-BRIEF locked palette + standing rules. */

:root {
  /* Palette — locked */
  --c-red: #C8102E;          /* MBSH scarlet */
  --c-red-deep: #A00C24;     /* hover/active */
  --c-white: #FFFFFF;
  --c-silver: #C0C0C0;       /* used flat for text; ALWAYS gradient for surfaces */
  --c-silver-light: #E8E8E8;
  --c-silver-dark: #8A8A8A;
  --c-off-black: #0A0A0A;    /* never pure #000 */
  --c-off-black-soft: #1A1A1A;
  --c-cream: #F8F4EC;
  --c-cream-dark: #E8E0CC;

  /* Silver metallic gradient — use for surfaces */
  --grad-silver: linear-gradient(135deg, #E8E8E8 0%, #C0C0C0 25%, #A8A8A8 50%, #C0C0C0 75%, #E8E8E8 100%);
  --grad-silver-bezel: linear-gradient(180deg, #F0F0F0 0%, #B5B5B5 50%, #888888 100%);

  /* Fonts — six-font system, five per page max */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-italic: 'Cormorant Garamond', Georgia, serif;
  --font-script-large: 'Allura', cursive;
  --font-script-small: 'Great Vibes', cursive;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Sizes */
  --container-width: 90rem;
  --container-narrow: 60rem;
  --content-width: 48rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration-mid: 400ms;
  --duration-slow: 800ms;

  /* Form text tokens — guarantee readable text inside form controls
     regardless of the body color cascade (home page sets body color: white). */
  --text-on-light: var(--c-off-black);
  --text-muted-on-light: var(--c-silver-dark);
  --placeholder-on-light: var(--c-silver-dark);
}

/* Global placeholder color — opacity:1 because Firefox defaults to 0.54. */
::placeholder { color: var(--placeholder-on-light); opacity: 1; }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font-family: var(--font-body); color: var(--c-off-black); background: var(--c-cream); line-height: 1.5; -webkit-font-smoothing: antialiased; }
body[data-page="home"] { background: var(--c-off-black); color: var(--c-white); }

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--duration-fast); }
a:hover { color: var(--c-red); }
button { font: inherit; background: none; border: none; cursor: pointer; padding: 0; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

/* Utility */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.container { max-width: var(--container-width); margin-inline: auto; padding-inline: var(--space-lg); }
.container--narrow { max-width: var(--container-narrow); }

/* Page-mascot floats (per-page Harry placements) */
.page-mascot { position: fixed; bottom: 0; pointer-events: none; z-index: 1; opacity: 0.95; }
.page-mascot--running { right: 2rem; width: 180px; height: auto; transform: translateY(20%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}