/* ═══════════════════════════════════════════════════════════
   FELIX DOR — Design Tokens
   Every visual decision is a CSS custom property. Change one
   value, the whole site responds. The configurator panel only
   ever writes to these.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'BN Magnique';
  src: url('/fonts/BNMagnique.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'BN AI Script';
  src: url('/fonts/BNAIScriptFinal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── COLOR ──────────────────────────────────────────────
     Warm black, warm cream, never pure values. */
  --bg-primary: #1a1a1a;
  --bg-secondary: #111111;
  --text-primary: #f7f3ee;
  --text-secondary: #a09890;
  --text-muted: #6b6560;        /* AA contrast only at large sizes — for caps and decorative captions */
  --text-accent: #c8b8a4;
  --divider: rgba(168, 152, 132, 0.15);
  --error: #c75757;

  /* ── TYPOGRAPHY ─────────────────────────────────────────
     Fluid clamp() baselines. The configurator's typography
     scale slider multiplies these so the slider still works. */
  --font-serif: 'BN Magnique', 'Cormorant Garamond', Georgia, serif;
  --font-script: 'BN AI Script', 'BN Magnique', Georgia, serif;

  --type-scale: 1;
  --body-line: 1.75;
  --heading-weight: 300;

  --h1-size: calc(clamp(2.5rem, 5vw + 1rem, 4.5rem) * var(--type-scale));
  --h2-size: calc(clamp(1.75rem, 3vw + 0.75rem, 2.875rem) * var(--type-scale));
  --h3-size: calc(clamp(1.25rem, 2vw + 0.5rem, 1.75rem) * var(--type-scale));
  --body-size: calc(clamp(1rem, 1vw + 0.5rem, 1.1875rem) * var(--type-scale));
  --cap-size: calc(clamp(0.625rem, 0.5vw + 0.375rem, 0.75rem) * var(--type-scale));

  --ls-wide: 0.25em;
  --ls-norm: 0.04em;
  --ls-title: 0.12em;

  /* ── SPACING ────────────────────────────────────────────
     Multiplier-driven; sliders adjust --space-scale. */
  --space-scale: 1;
  --sp-xs: calc(8px * var(--space-scale));
  --sp-sm: calc(16px * var(--space-scale));
  --sp-md: calc(32px * var(--space-scale));
  --sp-lg: calc(64px * var(--space-scale));
  --sp-xl: calc(120px * var(--space-scale));
  --sp-xxl: calc(200px * var(--space-scale));
  --section-padding: calc(clamp(80px, 12vw, 160px) * var(--space-scale));

  /* ── ANIMATION ──────────────────────────────────────────
     "Power-ease" — deliberate, not bouncy. */
  --duration: 800ms;
  --duration-long: 1200ms;
  --easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --easing-out: cubic-bezier(0, 0, 0.25, 1);
  --stagger: 100ms;

  /* ── LAYOUT ─────────────────────────────────────────────
     Funnel widths — content narrows as scroll deepens
     (Posner's zoom-lens, applied to commerce). */
  --max-width: 900px;
  --max-width-narrow: 640px;
  --max-width-tight: 500px;

  /* ── INTERACTION ────────────────────────────────────────
     48px minimum touch target on mobile (Google guideline). */
  --touch-target: 48px;
}

.light-mode {
  --bg-primary: #f7f3ee;
  --bg-secondary: #ede5d8;
  --text-primary: #1a1a1a;
  --text-secondary: #6b6560;
  --text-muted: #a09890;
  --text-accent: #8b7355;
  --divider: rgba(26, 26, 26, 0.1);
}

/* ═══════════════════════════════════════════════════════════
   RESET + BASE
   ═══════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-serif);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text-primary);
  background: var(--bg-primary);
  transition: background var(--duration) var(--easing),
              color var(--duration) var(--easing);
  overflow-x: hidden;
}

::selection {
  background: var(--text-accent);
  color: var(--bg-primary);
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

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

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════ */

/* Skip link — first focusable element on every page. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  color: var(--text-primary);
  background: var(--bg-secondary);
  padding: 12px 20px;
  z-index: 1000;
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border: 1px solid var(--text-accent);
  transition: top 0.2s var(--easing);
}
.skip-link:focus-visible {
  top: 8px;
}

/* Visible focus on keyboard nav. Brand-tinted. */
:focus-visible {
  outline: 2px solid var(--text-accent);
  outline-offset: 4px;
  border-radius: 1px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}

/* Visually hidden but available to screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Honour the user's motion preference. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}