/* ============================================================ SYTIO PROPOSAL — DESIGN TOKENS The templatizable layer: swap client identity here. Light = editorial (Sytio platform voice) Dark = cinematic (Atelier voice) ============================================================ */ /* ---------- Fonts (local, no CDN — file:// safe) ---------- */ @font-face { font-family: 'Geist'; src: url('../assets/fonts/geist-sans-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('../assets/fonts/geist-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('../assets/fonts/fraunces-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('../assets/fonts/fraunces-300i.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; } /* Metric-tuned fallback kills swap-CLS on the display face */ @font-face { font-family: 'Fraunces-fallback'; src: local('Georgia'); size-adjust: 105%; ascent-override: 92%; descent-override: 24%; font-display: swap; } :root { /* ---------- Brand constants (theme-independent) ---------- */ --terracotta: #b85c38; --terracotta-soft: #d98b6a; --terracotta-text: #a04e2e; /* 4.5:1 on cream for small text */ --cream: #f7f4ee; --charcoal: #1c1c1a; --charcoal-deep: #131210; /* cinema floor */ --charcoal-soft: #2a2a26; --charcoal-line: #3a3a34; --sand: #e8e2d6; --ink-soft: #6b6760; /* ---------- Typography ---------- */ --font-sans: 'Geist', system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace; --font-display: 'Fraunces', 'Fraunces-fallback', Georgia, serif; --fs-display: clamp(2.75rem, 7vw + 1rem, 5.5rem); --fs-h2: clamp(1.875rem, 4vw + .5rem, 3rem); --fs-h3: clamp(1.25rem, 2vw + .5rem, 1.5rem); --fs-body-lg: clamp(1.125rem, 1vw + .9rem, 1.3125rem); --fs-body: clamp(1.0625rem, .5vw + .95rem, 1.125rem); --fs-small: .875rem; --fs-label: .75rem; --fs-price: clamp(2rem, 5vw, 3rem); --ls-label: .09em; --lh-body: 1.65; /* ---------- Layout ---------- */ --container: 68rem; --measure: 36rem; --gutter: clamp(1.25rem, 5vw, 2.5rem); --section-pad: clamp(4.5rem, 12vw, 8.5rem); --radius: 10px; --radius-lg: 16px; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-theme: cubic-bezier(.4, 0, .2, 1); --t-reveal: 600ms; --t-theme: 700ms; /* ---------- Theme: LIGHT (default, editorial) ---------- */ --bg: var(--cream); --surface: #ffffff; --surface-raise: #fffdf9; --text: var(--charcoal); --text-soft: var(--ink-soft); --line: var(--sand); --line-strong: #d8d0bf; --accent: var(--terracotta); --accent-text: var(--terracotta-text); --accent-bright: var(--terracotta); --shadow: 0 1px 2px rgba(28, 28, 26, .04), 0 8px 24px rgba(28, 28, 26, .06); --chrome-scrim: rgba(247, 244, 238, .88); color-scheme: light; } /* ---------- Theme: DARK (cinematic) ---------- Toggled on by the section sentinel observer. */ body.theme-dark { --bg: var(--charcoal-deep); --surface: #1e1d1a; --surface-raise: #252420; --text: var(--cream); --text-soft: #a29b8e; --line: #2e2c27; --line-strong: var(--charcoal-line); --accent: var(--terracotta-soft); --accent-text: var(--terracotta-soft); --accent-bright: var(--terracotta-soft); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35); --chrome-scrim: rgba(19, 18, 16, .55); color-scheme: dark; }