@import "tailwindcss";

/* Tailwind scans these files for the classes they use. */
@source "../public_html/index.html";
@source "../public_html/assets/js/main.js";

/* ==========================================================================
   Marvs Global design tokens. Change a colour or size here, run `npm run build`,
   and the whole page follows. Contrast is checked against Paper (#faf8f5) unless noted.
   ========================================================================== */
@theme {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --color-ink: #15191c;          /* text, header, footer. 16.7:1 */
  --color-paper: #faf8f5;        /* main background */
  --color-stone: #ede8e0;        /* alternate sections. Ink on Stone 14.5:1 */
  --color-muted: #4a5258;        /* secondary text. 7.5:1 */
  --color-copper: #a8501f;       /* the one accent. 5.2:1 on Paper. Not for small text on Stone (4.49:1) */
  --color-copper-dark: #8c4119;  /* hover. 6.9:1 */
  --color-copper-light: #d98a5b; /* accent on Ink. 6.5:1 */
  --color-line: #d9d1c5;
  --color-line-strong: #767d83;  /* borders that mark a control. 3.9:1 */

  --text-display: clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);
  --text-display--line-height: 1.04;
  --text-display--letter-spacing: -0.02em;
  --text-h1: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --text-h1--line-height: 1.1;
  --text-h1--letter-spacing: -0.015em;
  --text-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
  --text-h2--line-height: 1.15;
  --text-h2--letter-spacing: -0.01em;
  --text-h3: 1.375rem;
  --text-h3--line-height: 1.3;
  --text-lead: 1.25rem;
  --text-lead--line-height: 1.55;
  --text-body: 1.0625rem;
  --text-body--line-height: 1.6;
  --text-small: 0.9375rem;
  --text-small--line-height: 1.5;

  --radius-photo: 2px;
  --radius-control: 6px;
  --container-page: 75rem;
}

/* Fonts are files in /assets/fonts, so nothing loads from Google. */
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* Lets a class apply only when JavaScript is off: `noscript:hidden` */
@custom-variant noscript (@media (scripting: none));

@layer base {
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
  body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--text-body--line-height); text-rendering: optimizeLegibility; padding-bottom: env(safe-area-inset-bottom, 0px); }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
  p { text-wrap: pretty; }
  :focus-visible { outline: 3px solid var(--color-copper); outline-offset: 3px; }
  .on-dark :focus-visible { outline-color: var(--color-copper-light); }
  ::selection { background: var(--color-copper-light); color: var(--color-ink); }
  [hidden] { display: none !important; }
}

/* The few things utilities cannot express */
@layer components {
  /* Photo slot: shows a labelled placeholder until the real photo file is uploaded to /images */
  .photo { position: relative; overflow: hidden; background: var(--color-stone); }
  .photo::after { content: "Placeholder photo. " attr(data-note); position: absolute; inset: auto 0 0 0; z-index: 0; padding: 1rem; font-size: var(--text-small); line-height: 1.5; color: var(--color-muted); }
  .photo > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
  .on-dark .photo::after { color: rgb(250 248 245 / 0.85); }

  /* Slide-in mobile menu (a native <dialog>) */
  .menu-panel { transform: translateX(100%); transition: transform 250ms ease-out, overlay 250ms allow-discrete, display 250ms allow-discrete; }
  .menu-panel[open] { transform: none; }
  @starting-style { .menu-panel[open] { transform: translateX(100%); } }
  .menu-panel::backdrop { background: rgb(21 25 28 / 0.6); }
}

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