/* Ultimate Design — Design tokens Concept: "Precision Film Lab". Colors sampled from the client logo. */

@font-face {
font-family: "Big Shoulders Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/bigshoulders-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face {
font-family: "Big Shoulders Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/bigshoulders-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face {
font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../assets/fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face {
font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../assets/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { /* --- Brand palette (sampled from ultimate-design-logo.png) --- */ --plum-900: #17101a; --plum-800: #231821; --plum-600: #463a48; --mauve-400: #7c707e; --silver-300: #c5c4c5; --paper-100: #f0f0f0; --gold-300: #f8e966; --gold-500: #efd417; --gold-700: #c89f08; --ink: #000000; /* --- Semantic surface / text (dark canvas is the default) --- */ --bg: var(--plum-900); --surface: var(--plum-800); --surface-raised: #2c2030; --line: var(--plum-600); --line-soft: rgba(124, 112, 126, 0.28); --text: #ffffff; --text-muted: var(--silver-300); --text-dim: #a49ba6; --accent: var(--gold-500); --on-accent: var(--ink); --gold-grad: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-500) 52%, var(--gold-700) 100%); --danger: #ff6b6b; --ok: #7ddc8a; /* --- Spacing: 4px base grid --- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; --section-y: clamp(64px, 9vw, 128px); /* --- Layout --- */ --container: 1320px; --gutter: clamp(16px, 4vw, 40px); /* --- Radii: precise, print-like. Round only for FABs/chips. --- */ --r-frame: 2px; --r-card: 4px; --r-chip: 999px; --r-fab: 50%; /* --- Type scale (fluid) --- */ --font-display: "Big Shoulders Display", "Arial Narrow", "Haettenschweiler", sans-serif; --font-text: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --t-display: clamp(2.75rem, 8.2vw, 6.5rem); --t-h1: clamp(2.25rem, 6vw, 4.5rem); --t-h2: clamp(1.875rem, 4.4vw, 3.25rem); --t-h3: clamp(1.375rem, 2.6vw, 1.875rem); --t-h4: clamp(1.125rem, 1.8vw, 1.375rem); --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --t-small: 0.9375rem; --t-xs: 0.8125rem; --lh-display: 0.92; --lh-head: 1.06; --lh-body: 1.65; --measure: 68ch; /* --- Elevation --- */ --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-2: 0 6px 20px rgba(0, 0, 0, 0.35); --sh-3: 0 18px 50px rgba(0, 0, 0, 0.5); --sh-gold: 0 8px 28px rgba(239, 212, 23, 0.22); /* --- Motion --- */ --e-out: cubic-bezier(0.22, 1, 0.36, 1); --e-in: cubic-bezier(0.55, 0, 1, 0.45); --e-io: cubic-bezier(0.65, 0, 0.35, 1); --d-fast: 160ms; --d-base: 260ms; --d-slow: 420ms; /* --- Fixed chrome (shared by AI button + back-to-top; see 4.5) --- */ --tabbar-h: 64px; --header-h: 56px; --fab-size: 56px; --fab-inset: 16px; --fab-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--fab-inset)); /* --- z-index scale --- */ --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-header: 60; --z-tabbar: 70; --z-fab: 80; --z-sheet: 90; --z-lightbox: 100; --z-preloader: 120; }

@media (min-width: 1024px) {
:root { --header-h: 72px; --fab-inset: 24px; --fab-bottom: 24px; }
}

/* Paper sections: a printed sheet laid on a dark table. */
.on-paper { --bg: var(--paper-100); --surface: #ffffff; --surface-raised: #ffffff; --line: #d3d2d4; --line-soft: rgba(35, 24, 33, 0.14); --text: var(--plum-900); --text-muted: #4a3f4c; --text-dim: #6c626e; background: var(--paper-100); color: var(--text); }