/* ============================================================ Opsundtoppen design tokens — "papirklipp" Hand-cut paper collage, 1950s–70s Scandinavian travel poster. Flat autumn colors. No borders, no gradients, no pure white or black. Depth is soft brown paper shadow only. Light = "warm paper" (default). Dark = "autumn night": only paper/ink/banner/shadows flip, accents hold. Set via [data-theme="dark"] on (script) or OS preference (no-JS fallback below). Consolidated from the Opus4.8 + Fable handoffs; duplicate plum/pine definitions resolved to their effective values. ============================================================ */ :root { /* ---- paper + ink ---- */ --ot-bg: #f4e8d0; /* warm paper page background */ --ot-surface: #faf3e3; /* raised paper / cards */ --ot-ink: #41301f; /* primary text, deep brown */ --ot-ink-fixed: #41301f; /* non-flipping ink, for text on fixed accent fills */ --ot-ink-muted: #9c8465; /* secondary text */ --ot-ink-soft: #8a6a45; /* tertiary / kickers on cream */ /* ---- accents (constant across themes) ---- */ --ot-rust: #c96f3b; /* primary / banner */ --ot-ochre: #d9a514; /* sun / highlight — too light for cream text */ --ot-olive: #7d8f4c; /* forest / success */ --ot-teal: #3d8a80; /* water / links */ --ot-bark: #6b4a2e; --ot-amber: #8a5a0f; --ot-plum: #6e3b46; --ot-pine: #3f5a3a; --ot-slate: #3f5566; --ot-brick: #a24a34; --ot-cream: #f4e8d0; /* text on accent fills (== light --ot-bg by design) */ --ot-moon: #efe3c4; /* moon paper / dark-mode pop surface */ --ot-moon-crater: #d8c9a8; /* ---- semantic ---- */ --ot-primary: var(--ot-rust); --ot-link: var(--ot-teal); --ot-link-hover: #2f6f67; --ot-success: var(--ot-olive); --ot-warning: var(--ot-ochre); --ot-danger: #b0442c; --ot-surface-pop: var(--ot-surface); /* surface that must not blend into the bg */ --ot-banner: var(--ot-rust); --ot-pop-kicker: var(--ot-ink-muted); /* kicker color on a pop surface */ /* ---- typography ---- */ --ot-font-display: 'Anton', sans-serif; /* uppercase only */ --ot-font-heading: 'Young Serif', serif; --ot-font-body: 'Archivo', sans-serif; /* 400/500/600/700 */ --ot-font-mono: 'IBM Plex Mono', monospace; --ot-leading-display: 0.95; --ot-leading-body: 1.6; --ot-kicker-tracking: 0.2em; --ot-skilt-tracking: 0.3em; --ot-text-xs: 12px; /* kicker */ --ot-text-sm: 13px; /* skilt, chips, footer */ --ot-text-md: 14.5px; /* supporting copy */ --ot-text-base: 16px; /* body, buttons, inputs */ --ot-text-lg: 22px; --ot-text-xl: 26px; /* card headings, OTP digits */ --ot-text-title: 38px; /* tile titles */ --ot-text-display: clamp(56px, 12vw, 96px); /* wordmark */ /* ---- spacing ---- */ --ot-space-2xs: 4px; --ot-space-xs: 8px; --ot-space-sm: 12px; --ot-space-md: 20px; /* tile grid gap */ --ot-space-lg: 26px; /* tile padding block */ --ot-space-xl: 34px; /* card padding */ --ot-space-2xl: 40px; /* page gutter */ --ot-space-3xl: 52px; /* banner top */ --ot-page-max: 1080px; /* breakpoints (for reference — can't be var()'d in media queries): 900px, 560px */ /* ---- shadows (ink-brown, never black in light mode) ---- */ --ot-shadow-paper: 0 5px 8px rgba(65, 48, 31, 0.28); --ot-shadow-paper-lift: 0 10px 16px rgba(65, 48, 31, 0.32); --ot-shadow-label: 0 2px 4px rgba(65, 48, 31, 0.25); --ot-shadow-button: 0 3px 5px rgba(65, 48, 31, 0.28); --ot-shadow-button-lift: 0 6px 10px rgba(65, 48, 31, 0.3); --ot-shadow-inset: inset 0 2px 3px rgba(65, 48, 31, 0.15); --ot-shadow-cutout: drop-shadow(-3px 2px 4px rgba(65, 48, 31, 0.35)); --ot-shadow-sun: 0 4px 7px rgba(65, 48, 31, 0.3); --ot-shadow-banner: drop-shadow(0 4px 5px rgba(65, 48, 31, 0.3)); --ot-shadow-wordmark: 0 3px 5px rgba(65, 48, 31, 0.3); /* ---- hand-cut radii (asymmetric; rotate per sibling so no two adjacent match) ---- */ --ot-radius-cut-a: 14px 22px 12px 24px / 20px 12px 22px 14px; --ot-radius-cut-b: 22px 12px 24px 14px / 12px 22px 14px 20px; --ot-radius-cut-c: 12px 24px 14px 22px / 24px 14px 20px 12px; --ot-radius-cut-d: 24px 14px 20px 12px / 14px 24px 12px 22px; --ot-radius-cut-sm-a: 10px 16px 9px 17px / 15px 9px 16px 10px; --ot-radius-cut-sm-b: 16px 9px 17px 10px / 9px 15px 10px 16px; --ot-radius-cut-sm-c: 10px 14px 9px 15px / 13px 9px 14px 10px; --ot-radius-cut-sm-d: 14px 9px 15px 10px / 9px 13px 10px 14px; --ot-radius-cut-sm-e: 9px 15px 10px 14px / 14px 10px 13px 9px; --ot-radius-pill: 999px; --ot-radius-sun: 47% 53% 51% 49% / 52% 49% 51% 48%; --ot-radius-moon: 51% 49% 47% 53% / 49% 52% 48% 51%; /* ---- motion ("straight at rest, tilt on hover; lift, not push") ---- */ --ot-hover-tilt: -0.7deg; /* alternate sign per sibling */ --ot-transition: transform 0.18s ease, box-shadow 0.18s ease; --ot-ease-flip: cubic-bezier(0.55, 0, 0.15, 1); --ot-ease-bite: cubic-bezier(0.7, 0, 0.25, 1); --ot-theme-fade: background 0.45s ease; --ot-flip-duration: 550ms; /* paper-flip turn */ --ot-flip-delay: 950ms; /* sanctioned skilt flip waits for the sun to finish */ } /* ---- dark: "autumn night" ---- Values appear twice on purpose: the attribute set by the toggle/boot script wins; the media query covers the no-JS fallback. Keep in sync. */ [data-theme="dark"] { --ot-bg: #2a2118; --ot-surface: #3a2e20; --ot-ink: #f4e8d0; --ot-ink-muted: #b8a284; --ot-ink-soft: #b8a284; --ot-surface-pop: var(--ot-moon); /* cream surfaces become moon paper, keep ink-fixed text */ --ot-banner: #3a2e20; --ot-pop-kicker: #8a6a45; --ot-shadow-paper: 0 5px 8px rgba(0, 0, 0, 0.4); --ot-shadow-paper-lift: 0 10px 16px rgba(0, 0, 0, 0.45); --ot-shadow-label: 0 2px 4px rgba(0, 0, 0, 0.35); --ot-shadow-button: 0 3px 5px rgba(0, 0, 0, 0.4); --ot-shadow-button-lift: 0 6px 10px rgba(0, 0, 0, 0.45); --ot-shadow-inset: inset 0 2px 3px rgba(0, 0, 0, 0.3); --ot-shadow-cutout: drop-shadow(-3px 2px 4px rgba(0, 0, 0, 0.45)); --ot-shadow-sun: 0 4px 7px rgba(0, 0, 0, 0.4); --ot-shadow-banner: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4)); --ot-shadow-wordmark: 0 3px 5px rgba(0, 0, 0, 0.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ot-bg: #2a2118; --ot-surface: #3a2e20; --ot-ink: #f4e8d0; --ot-ink-muted: #b8a284; --ot-ink-soft: #b8a284; --ot-surface-pop: var(--ot-moon); --ot-banner: #3a2e20; --ot-pop-kicker: #8a6a45; --ot-shadow-paper: 0 5px 8px rgba(0, 0, 0, 0.4); --ot-shadow-paper-lift: 0 10px 16px rgba(0, 0, 0, 0.45); --ot-shadow-label: 0 2px 4px rgba(0, 0, 0, 0.35); --ot-shadow-button: 0 3px 5px rgba(0, 0, 0, 0.4); --ot-shadow-button-lift: 0 6px 10px rgba(0, 0, 0, 0.45); --ot-shadow-inset: inset 0 2px 3px rgba(0, 0, 0, 0.3); --ot-shadow-cutout: drop-shadow(-3px 2px 4px rgba(0, 0, 0, 0.45)); --ot-shadow-sun: 0 4px 7px rgba(0, 0, 0, 0.4); --ot-shadow-banner: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4)); --ot-shadow-wordmark: 0 3px 5px rgba(0, 0, 0, 0.4); } }