/* ========================================================================== GoNagi Storefront — design tokens Version 1.0.0 · 2026-09-24 Source of truth: GoNagi design system (colour, type, radius, shadow) plus storefront extensions marked [EXT]. Every token uses the --gn- prefix so it cannot collide with Booking Core's own styles. ========================================================================== */ /* ---- Fonts -------------------------------------------------------------- Montserrat (brand) + Noto Sans JP (Japanese glyphs; Montserrat has none). Loaded from Google Fonts in the reference files: https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700&display=swap Production recommendation: self-host both families (woff2, subset JP) to avoid a third-party request and to control caching. Weights used: Montserrat 300 · 400 · 500 · 600 · 700 · 800; Noto Sans JP 400 · 500 · 700. ------------------------------------------------------------------------ */ :root { /* Colour · brand palette (GoNagi design system) */ --gn-color-neutral: #f8f9fa; /* page background */ --gn-color-lightblue: #eaf0f3; /* soft sections, chips, selected fills */ --gn-color-blue: #6d8aa5; /* outlines, borders, icons; never small text */ --gn-color-slate: #596b7e; /* secondary text, captions, helper text */ --gn-color-darkblue: #213346; /* primary ink, headings, strong buttons, footer */ --gn-color-gold: #c5a059; /* accent on dark grounds only */ --gn-color-lightgold: #ebcf8a; /* primary CTA fill (one per view) */ --gn-color-charcoal: #474747; /* long-form body text */ --gn-color-white: #ffffff; /* Colour · interaction states [EXT] */ --gn-color-lightgold-hover: #e3c273; --gn-color-darkblue-hover: #2c4259; --gn-color-focus: #6d8aa5; /* Colour · feedback [EXT] — not in the brand book; added for form errors, sold-out and success states. Contrast-checked on white (see README). */ --gn-color-error: #a3322a; /* 6.6:1 on white */ --gn-color-error-bg: #fbeeec; --gn-color-success: #2f6b50; /* 6.1:1 on white */ --gn-color-success-bg: #e8f2ec; --gn-color-disabled-bg: #eef1f3; --gn-color-disabled-text: #596b7e; --gn-color-scrim: rgba(33, 51, 70, 0.78); /* darkblue scrim over photos */ --gn-color-skeleton: #e3e9ed; /* Typography · families */ --gn-font-family: 'Montserrat', 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', sans-serif; --gn-font-family-ja: 'Montserrat', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif; /* Typography · weights */ --gn-font-light: 300; --gn-font-regular: 400; --gn-font-medium: 500; --gn-font-semibold: 600; --gn-font-bold: 700; --gn-font-extrabold: 800; /* Typography · scale (size / line-height). Design-system styles: heading, h2, text. */ --gn-text-display: 60px; --gn-leading-display: 1.1; /* hero caps line */ --gn-text-hero: 40px; --gn-leading-hero: 1.3; /* hero light line */ --gn-text-section: 32px; --gn-leading-section: 1.4; /* section titles */ --gn-text-title: 28px; --gn-leading-title: 1.45; /* page titles */ --gn-text-heading: 24px; --gn-leading-heading: 1.5; /* DS "heading" */ --gn-text-h2: 20px; --gn-leading-h2: 1.5; /* DS "h2" */ --gn-text-card-title: 18px; --gn-leading-card-title: 1.5; --gn-text-lead: 18px; --gn-leading-lead: 1.7; --gn-text-body: 16px; --gn-leading-body: 1.5; /* DS "text" */ --gn-text-body-long: 16px; --gn-leading-body-long: 1.8; /* paragraphs */ --gn-text-sm: 14px; --gn-leading-sm: 1.6; --gn-text-xs: 13px; --gn-leading-xs: 1.5; --gn-text-caption: 12px; --gn-leading-caption: 1.5; --gn-tracking-eyebrow: 0.24em; --gn-leading-ja-bonus: 0.15; /* add to line-height for :lang(ja) body copy */ /* Mobile overrides (< 768px) are applied in assets.css via these tokens */ --gn-text-display-mobile: 34px; --gn-text-hero-mobile: 22px; --gn-text-section-mobile: 24px; --gn-text-title-mobile: 22px; /* Spacing scale (4px base) */ --gn-space-1: 4px; --gn-space-2: 8px; --gn-space-3: 12px; --gn-space-4: 16px; --gn-space-5: 20px; --gn-space-6: 24px; --gn-space-7: 28px; --gn-space-8: 32px; --gn-space-10: 40px; --gn-space-12: 48px; --gn-space-14: 56px; --gn-space-16: 64px; --gn-space-18: 72px; --gn-space-20: 80px; --gn-space-24: 96px; --gn-space-32: 128px; /* Layout */ --gn-container-max: 1200px; /* content width at 1440 viewport (120px margins) */ --gn-gutter-mobile: 20px; --gn-gutter-desktop: 40px; --gn-header-height: 84px; --gn-header-height-mobile: 64px; --gn-hero-height: 580px; --gn-hero-height-mobile: 440px; --gn-sidebar-width: 440px; /* booking panel / itinerary panel */ /* Radius (brand: softly rounded; nothing fully square, nothing pill-shaped) */ --gn-radius-sm: 4px; /* DS radius-4: cards, inputs, buttons */ --gn-radius-lg: 16px; /* large media (tour gallery) */ --gn-radius-circle: 50%; /* step numbers, radio dots only */ /* Shadow */ --gn-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2); /* DS box-shadow */ --gn-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.2), 0 16px 40px rgba(33, 51, 70, 0.10); /* floating panels */ --gn-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.2), 0 14px 32px rgba(33, 51, 70, 0.10); --gn-shadow-sticky: 0 -4px 20px rgba(33, 51, 70, 0.12); /* mobile sticky bar */ /* Controls */ --gn-touch-min: 44px; /* minimum tap target */ --gn-control-height: 56px; /* inputs and primary buttons, desktop */ --gn-control-height-sm: 48px; --gn-border-width: 1px; --gn-tab-indicator: 4px; /* active tab underline */ --gn-focus-ring: 2px solid var(--gn-color-focus); --gn-focus-offset: 2px; /* Motion */ --gn-duration-fast: 120ms; --gn-duration: 200ms; --gn-ease: cubic-bezier(0.2, 0, 0, 1); /* Z-index */ --gn-z-header: 20; --gn-z-sticky: 30; --gn-z-drawer: 40; } /* Breakpoints (CSS custom properties cannot be used inside @media; these are the literal values used in assets.css): --gn-bp-mobile: 0–767px (designed at 390px) --gn-bp-tablet: 768px --gn-bp-desktop: 1024px --gn-bp-wide: 1440px (designed at 1440px) */