/* Fonts are loaded dynamically via layout.tsx based on theme config */ /* ── Design Tokens (Fallback Defaults) ───────────── */ /* These are overridden at runtime by CSS vars injected from gallery.yaml theme config. */ :root { --bg-primary: #1a1a1a; --bg-secondary: #141414; --bg-card: #1e1e1e; --bg-card-hover: #242424; --bg-overlay: rgba(0, 0, 0, 0.98); --text-primary: #f5f5f0; --text-secondary: #a0a09a; --text-muted: #706f6a; --border-subtle: #2a2a28; --border-hover: #3a3a38; --accent: #e60012; --accent-dim: rgba(230, 0, 18, 0.12); --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-caption: 'EB Garamond', Georgia, serif; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --transition-fast: 200ms ease; --transition-normal: 400ms ease; --transition-slow: 600ms ease; --max-width: 1400px; --header-height: 64px; } /* ── Light Theme (Studio Light) ──────────────────── */ [data-theme='light'] { --bg-primary: #f5f5f0; --bg-secondary: #eaeae5; --bg-card: #ffffff; --bg-card-hover: #f0f0eb; --bg-overlay: rgba(245, 245, 240, 0.96); --text-primary: #1a1a18; --text-secondary: #4a4a45; --text-muted: #6a6a65; --border-subtle: #ddddd8; --border-hover: #c5c5c0; --accent: #c8000f; --accent-dim: rgba(200, 0, 15, 0.08); } /* ── Minimal: Swiss Brutalist Palette ────────────── */ [data-preset='minimal'] { --bg-primary: #000000; --bg-secondary: #0a0a0a; --bg-card: #111111; --bg-card-hover: #1a1a1a; --bg-overlay: rgba(0, 0, 0, 0.98); --text-primary: #ffffff; --text-secondary: #888888; --text-muted: #555555; --border-subtle: #1a1a1a; --border-hover: #333333; } [data-preset='minimal'][data-theme='light'] { --bg-primary: #ffffff; --bg-secondary: #f7f7f7; --bg-card: #ffffff; --bg-card-hover: #fafafa; --bg-overlay: rgba(255, 255, 255, 0.98); --text-primary: #000000; --text-secondary: #475569; --text-muted: #64748b; --border-subtle: #eeeeee; --border-hover: #cccccc; } /* ── Editorial: Cinematic Magazine Palette ────────── */ [data-preset='editorial'] { --bg-primary: #1a1714; --bg-secondary: #141210; --bg-card: #1e1b17; --bg-card-hover: #252119; --bg-overlay: rgba(20, 18, 16, 0.98); --text-primary: #ede8e0; --text-secondary: #9a9086; --text-muted: #6b6359; --border-subtle: #2a2620; --border-hover: #3a3530; } [data-preset='editorial'][data-theme='light'] { --bg-primary: #faf8f4; --bg-secondary: #f0ece4; --bg-card: #ffffff; --bg-card-hover: #f5f2ec; --bg-overlay: rgba(250, 248, 244, 0.96); --text-primary: #1a1714; --text-secondary: #4a4540; --text-muted: #6a655f; --border-subtle: #e5e0d8; --border-hover: #ccc7c0; } /* ── Classic: Gilded Gallery Palette ─────────────── */ [data-preset='classic'] { --bg-primary: #121210; --bg-secondary: #0e0e0c; --bg-card: #181816; --bg-card-hover: #1e1e1a; --bg-overlay: rgba(14, 14, 12, 0.98); --text-primary: #f0ece4; --text-secondary: #a09888; --text-muted: #706858; --border-subtle: #2a2822; --border-hover: #3a3830; } [data-preset='classic'][data-theme='light'] { --bg-primary: #fdfbf5; --bg-secondary: #f5f0e6; --bg-card: #ffffff; --bg-card-hover: #faf6ee; --bg-overlay: rgba(253, 251, 245, 0.96); --text-primary: #1a1810; --text-secondary: #4a4535; --text-muted: #6a6555; --border-subtle: #e5dfcf; --border-hover: #d0c8b5; } /* ── Noir: Darkroom Analog Palette ───────────────── */ [data-preset='noir'] { --bg-primary: #111014; --bg-secondary: #0c0b0f; --bg-card: #16141a; --bg-card-hover: #1e1c22; --bg-overlay: rgba(11, 10, 15, 0.98); --text-primary: #f0ebe0; --text-secondary: #998f80; --text-muted: #665c50; --border-subtle: #252228; --border-hover: #3a3540; } [data-preset='noir'][data-theme='light'] { --bg-primary: #faf5ef; --bg-secondary: #f0ebe3; --bg-card: #ffffff; --bg-card-hover: #f5f0e8; --bg-overlay: rgba(250, 245, 239, 0.96); --text-primary: #1a1610; --text-secondary: #4a4538; --text-muted: #6a6558; --border-subtle: #e5dfd5; --border-hover: #ccc5b8; } /* ── Monograph: Typographic / Book Palette ────────── */ [data-preset='monograph'] { --bg-primary: #151515; --bg-secondary: #0f0f0f; --bg-card: #1a1a1a; --bg-card-hover: #222222; --bg-overlay: rgba(15, 15, 15, 0.98); --text-primary: #e8e8e8; --text-secondary: #888888; --text-muted: #555555; --border-subtle: #222222; --border-hover: #3a3a3a; } [data-preset='monograph'][data-theme='light'] { --bg-primary: #fafafa; --bg-secondary: #f2f2f2; --bg-card: #ffffff; --bg-card-hover: #f7f7f7; --bg-overlay: rgba(250, 250, 250, 0.98); --text-primary: #111111; --text-secondary: #475569; --text-muted: #64748b; --border-subtle: #e5e5e5; --border-hover: #cccccc; } /* ── Reset ────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; line-height: 1.6; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: inherit; } img { display: block; max-width: 100%; } a:focus-visible, button:focus-visible, input:focus-visible, [role='button']:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }