/* Design tokens — adapted from the "Classical" design system handoff. Font faces are loaded via tags in each page's , not @import here, so the font request fires in parallel with this stylesheet instead of after it. */ :root { --color-neutral-100: #f8f4f4; --color-neutral-200: #eae7e7; --color-neutral-300: #d7d3d3; --color-neutral-400: #bab6b6; --color-neutral-500: #9b9797; --color-neutral-600: #7d7979; --color-neutral-700: #605d5d; --color-neutral-800: #444141; --color-neutral-900: #2d2b2b; --color-accent-400: #e1ad66; --color-accent-500: #c28d41; --font-heading: "Cormorant Garamond", system-ui, sans-serif; --font-body: "Lora", system-ui, sans-serif; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px; --space-1: 4.6px; --space-2: 9.2px; --space-3: 13.8px; --space-4: 18.4px; --space-6: 27.6px; --space-8: 36.8px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-neutral-900); color: var(--color-neutral-100); font-family: var(--font-body); font-size: 15px; line-height: 1.55; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; line-height: 1.12; margin: 0 0 var(--space-2); } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent-400); text-decoration: none; text-underline-offset: 3px; } img { display: block; max-width: 100%; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent-400); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent-400) 30%, transparent); } /* — buttons — */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: 1.2; background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); transition: background 0.2s ease; } .btn-primary { color: var(--color-accent-400); border-color: var(--color-accent-400); } .btn-primary:hover { background: color-mix(in srgb, var(--color-accent-400) 12%, transparent); } .btn-secondary { color: var(--color-neutral-200); border-color: color-mix(in srgb, var(--color-neutral-100) 25%, transparent); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-neutral-100) 7%, transparent); } .btn-block { width: 100%; } /* — forms — */ .field { display: flex; flex-direction: column; gap: 5px; } .field > label { font-size: 12px; color: var(--color-neutral-400); } .input { width: 100%; min-height: 36px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--color-neutral-100); caret-color: var(--color-accent-400); background: transparent; border: 1px solid color-mix(in srgb, var(--color-neutral-100) 25%, transparent); border-radius: var(--radius-md); } .input:hover { border-color: color-mix(in srgb, var(--color-neutral-100) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent-400); } textarea.input { min-height: 120px; resize: vertical; font-family: inherit; } /* — tags — */ .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 3px; } .tag-outline { border: 1px solid var(--color-accent-400); color: var(--color-accent-400); }