/* Jeremy Healy - site styles */

/* ==========================================================================
   Fonts — Jeremy Healy Design System
   Headings: Playfair Display (serif) — brand guideline calls for "Playfair
   Regular"; Playfair Display is the Google Fonts family and matches exactly.
   Body: Inter — used as specified in brand guidelines, no substitution.
   Both loaded from Google Fonts (no local font files were supplied).
   ========================================================================== */

:root {
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* ==========================================================================
   Colors — Jeremy Healy Design System
   Source: JH Brand Guidelines.pdf (page 6 "Colours", page 8 "Balanced —
   fashion × club — your core direction"). Values are the exact brand hexes,
   not rounded.
   ========================================================================== */

:root {
  /* ---- Base palette (exact brand values) ---- */
  --jh-black: #000000;
  --jh-charcoal: #2a2a2a;
  --jh-saddle: #4e3227;
  --jh-off-white: #f5f3ef;
  --jh-white: #ffffff;

  --jh-fuchsia: #eb0091;      /* Pantone Process Magenta — primary accent */
  --jh-flush-orange: #ff7900; /* Pantone 151c — fashion accent */
  --jh-blue: #0073b4;         /* Pantone 300c — club/disruption accent */
  --jh-aqua: #84ccd5;         /* Pantone 305c — fashion accent, tint */

  /* Tints/shades derived in oklch from the brand hexes — for hover/press
     states and subtle surfaces. Never invented hues; same base chroma. */
  --jh-fuchsia-dim: oklch(from var(--jh-fuchsia) calc(l - 0.08) c h);
  --jh-fuchsia-tint: oklch(from var(--jh-fuchsia) calc(l + 0.32) calc(c * 0.5) h);
  --jh-blue-dim: oklch(from var(--jh-blue) calc(l - 0.08) c h);
  --jh-charcoal-lift: oklch(from var(--jh-charcoal) calc(l + 0.08) c h);

  /* ---- Semantic aliases ---- */
  --bg-page: var(--jh-black);
  --bg-page-alt: var(--jh-off-white);
  --bg-surface: var(--jh-charcoal);
  --bg-surface-raised: var(--jh-charcoal-lift);
  --bg-inverse: var(--jh-off-white);

  --text-primary: var(--jh-off-white);
  --text-primary-on-light: var(--jh-black);
  --text-secondary: color-mix(in oklab, var(--jh-off-white) 62%, transparent);
  --text-secondary-on-light: color-mix(in oklab, var(--jh-black) 62%, transparent);
  --text-muted: color-mix(in oklab, var(--jh-off-white) 40%, transparent);

  --accent-primary: var(--jh-fuchsia);
  --accent-primary-hover: var(--jh-fuchsia-dim);
  --accent-secondary: var(--jh-blue);
  --accent-fashion: var(--jh-flush-orange);
  --accent-fashion-tint: var(--jh-aqua);

  --border-hairline: color-mix(in oklab, var(--jh-off-white) 16%, transparent);
  --border-hairline-on-light: color-mix(in oklab, var(--jh-black) 14%, transparent);
  --border-accent: var(--jh-fuchsia);

  --focus-ring: var(--jh-fuchsia);
}

/* ==========================================================================
   Typography — Jeremy Healy Design System
   Headings sit in Playfair Display, always at generous size with tight
   tracking; body copy is Inter, wider tracking on labels/eyebrows.
   ========================================================================== */

:root {
  --type-display-1: 400 clamp(3.5rem, 9vw, 8.5rem)/0.98 var(--font-display);
  --type-display-2: 400 clamp(2.75rem, 6vw, 5.5rem)/1.02 var(--font-display);
  --type-heading-1: 500 clamp(2.25rem, 4vw, 3.75rem)/1.08 var(--font-display);
  --type-heading-2: 500 clamp(1.75rem, 2.6vw, 2.5rem)/1.15 var(--font-display);
  --type-heading-3: 600 1.375rem/1.3 var(--font-display);

  --type-eyebrow: 600 0.8125rem/1.4 var(--font-body);
  --type-body-lg: 400 0.9375rem/1.65 var(--font-body);
  --type-body: 400 0.875rem/1.6 var(--font-body);
  --type-body-sm: 400 0.8125rem/1.5 var(--font-body);
  --type-caption: 500 0.8125rem/1.4 var(--font-body);
  --type-button: 600 0.9375rem/1 var(--font-body);

  --tracking-eyebrow: 0.18em;
  --tracking-display: -0.01em;
  --tracking-heading: -0.005em;
  --tracking-wide: 0.06em;
}

/* ==========================================================================
   Spacing, radii, shadows, motion — Jeremy Healy Design System
   No radii/shadow spec exists in the brand PDF (it's a flat, editorial,
   hard-edged system) — these values codify what's implied: square corners,
   hairline borders, no drop shadows on cards, deliberate/measured motion.
   ========================================================================== */

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 12rem;

  --page-margin: clamp(1.25rem, 4vw, 4rem);
  --content-max: 1400px;

  /* Editorial, hard-edged system: no rounded corners on brand surfaces */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-pill: 999px; /* only for tags/pills, never cards or buttons */

  --border-width: 1px;

  /* No card drop-shadows in this system — separation comes from hairline
     borders and background contrast, not elevation. Reserved for overlays. */
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.55);

  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-standard: 280ms; /* @kind other */
  --duration-slow: 480ms; /* @kind other */
}

/* Base resets + global element defaults — Jeremy Healy Design System */

* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
}

p {
  margin: 0;
}

a {
  color: var(--jh-fuchsia);
  text-decoration: none;
}

a:hover {
  color: var(--jh-fuchsia-tint);
  text-decoration: underline;
}

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

button {
  font-family: var(--font-body);
}

::selection {
  background: var(--jh-fuchsia);
  color: var(--jh-white);
}

/* Lock zoom on phones (pinch + double-tap) */
html, body { touch-action: pan-x pan-y; }