/* ========================================================================== Design tokens Source: _reference/pdf/*.pdf design annotations + on-canvas measurement. See docs/todo.md for values that are still unconfirmed with the client. ========================================================================== */ :root { /* -- Layout --------------------------------------------------------- */ /* Measured directly from the supplied PC design canvas (1631px wide, inner content column ~986px). Kept at the exact measured value — do not round to 1000px. Adjust only after a browser side-by-side comparison against _reference/pdf/. */ --content-width: 986px; --content-padding-inline: 24px; /* Single breakpoint. Only PC (1631px) and SP (375px) designs were supplied — there is no tablet design. 768px is the coder-side split point (see docs/todo.md "Final responsive breakpoints"). CSS custom properties can't be read inside @media conditions, so this value is duplicated as a literal 768px wherever a media query is written; keep both in sync if it ever changes. */ --breakpoint-sp-max: 767px; --breakpoint-pc-min: 768px; --header-height-pc: 75px; /* SP header height was not reliably measurable from the low-resolution mockup render (logo lockup + hamburger tap target). 64px is a conventional starting value — confirm against the real design during browser QA and adjust if needed. */ --header-height-sp: 64px; /* -- Color ------------------------------------------------------------ */ --color-black: #000000; --color-white: #ffffff; --color-gold: #c8bb84; /* beige section background */ --color-deep-gold: #b89c4f; /* amenity table border / rule */ --color-accent-red: #e8382f; /* booking CTA (Airbnb) */ --color-accent-pink: #e95377; /* booking CTA secondary accent */ --color-booking-blue: #229ed8; /* Booking.com brand accent */ --color-booking-navy: #113671; /* Booking.com brand fill */ /* Amenity table label cells. PDF on-canvas annotation measures #dcdddd / #dbd6c4, but docs/coding-spec.md §4 lists #dcdcdc for the gray. The two differ by one digit. Using the PDF-measured value because CLAUDE.md names _reference/pdf/ as the visual source of truth; flagged in docs/todo.md for client confirmation. */ --color-table-label-gray: #dcdddd; --color-table-label-beige: #dbd6c4; --color-text: var(--color-black); --color-text-inverse: var(--color-white); /* -- Typography -------------------------------------------------------- Weights follow the PDF's font annotations. Loaded as web fonts via Google Fonts in each page — see docs/todo.md for the still-unconfirmed "final weight" item. */ --font-en-serif: 'EB Garamond', 'Times New Roman', serif; --font-jp-serif: 'Noto Serif JP', serif; --font-jp-sans: 'Noto Sans JP', sans-serif; --font-jp-gothic: 'M PLUS 1p', sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fs-base: 16px; --lh-base: 1.8; /* -- Spacing scale (4px rhythm; implementation convenience, not a design-confirmed value) ---------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --space-9: 128px; /* -- Motion -------------------------------------------------------- docs/coding-spec.md §5 reveal snippet: opacity .1→1, translateY(32px)→0, .8s ease. Treated as a provisional starting value pending browser comparison (docs/todo.md "Scroll reveal timing"). */ --reveal-distance: 32px; --reveal-duration: 0.8s; --reveal-easing: ease; /* -- Misc ------------------------------------------------------------ */ --radius-pill: 999px; --radius-sm: 4px; --border-hairline: 1px solid rgba(255, 255, 255, 0.3); --border-hairline-dark: 1px solid rgba(0, 0, 0, 0.15); --z-header: 100; --z-nav-drawer: 200; --z-page-top: 50; }