/* Direction: velvet-lounge cinema — near-black canvas, brass-gold accent,
   a serif marquee display over a clean sans body. Opens in dark mode. */
:root {
  color-scheme: dark;
  --canvas: #120e0c;
  --surface: #1c1613;
  --surface-2: #251c17;
  --border: #3a2d24;
  --border-strong: #594536;
  --ink: #f6ede0;
  --muted: #b2a08d;
  --accent: #cf9f43;
  --accent-hover: #e0b45c;
  --accent-ink: #1c1310;
  --accent-text: #e2bb64;
  --accent-strong: #f0c96e;
  --accent-soft: #2c2117;
  --accent-border: #6b5030;
  --success: #4caf6c;
  --success-ink: #0c1f12;
  --success-soft: #162a1c;
  --success-strong: #83d69d;
  --warning: #dda23c;
  --warning-ink: #241a08;
  --warning-soft: #2c2013;
  --warning-strong: #f0c06a;
  --danger: #e0564f;
  --danger-ink: #250a09;
  --danger-soft: #2c1512;
  --danger-strong: #f19089;
  --chart-1: #cf9f43;
  --chart-2: #c96b5a;
  --chart-3: #6f9c6a;
  --chart-4: #5a86ad;
  --chart-5: #a273c4;
  --chart-6: #d68fb0;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
  --radius-card: 20px;
  --radius-btn: 999px;
  --radius-input: 10px;
  --shadow-card: 0 24px 60px -24px rgba(0, 0, 0, 0.7);

  --x-on-photo: #fdf7ec;
  --x-deep: #08060a;
}

html[data-theme="light"] {
  --canvas: #faf4e9;
  --surface: #ffffff;
  --surface-2: #f4e9d7;
  --border: #e3d3b8;
  --border-strong: #c8ad84;
  --ink: #2b1d14;
  --muted: #786754;
  --accent: #a97323;
  --accent-hover: #8f611c;
  --accent-ink: #000000;
  --accent-text: #8f611c;
  --accent-strong: #6e4c17;
  --accent-soft: #f3e2c1;
  --accent-border: #d6b784;
  --success: #1c7a42;
  --success-ink: #ffffff;
  --success-soft: #e2f0e6;
  --success-strong: #145c31;
  --warning: #a3620f;
  --warning-ink: #ffffff;
  --warning-soft: #f4e6d1;
  --warning-strong: #7c4a0b;
  --danger: #b6382f;
  --danger-ink: #ffffff;
  --danger-soft: #f5dfdc;
  --danger-strong: #8c2a23;
  --chart-1: #a97323;
  --chart-2: #a5493a;
  --chart-3: #3f6b3b;
  --chart-4: #345c7c;
  --chart-5: #714a91;
  --chart-6: #a4577c;

  --x-on-photo: #fdf7ec;
  --x-deep: #211609;
}

/*
 * app.css — The Brass Reel: only the one-off entrance motion for sections
 * marked [data-inview]. Everything else is primitives + theme tokens.
 */

[data-inview] {
  transform: translateY(28px);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-inview].is-inview {
  transform: translateY(0);
}

html.reduced-motion [data-inview] {
  transform: none;
  transition: none;
}