@import url('../brand/tokens.css'); /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; } html, body { min-height: 100%; } img { max-width: 100%; display: block; height: auto; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--line-height-normal); color: var(--color-text); background-color: var(--color-background); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* ── Typography ── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-heading); line-height: var(--line-height-tight); margin-bottom: var(--space-md); } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); margin-top: var(--space-xl); } h3 { font-size: var(--text-xl); margin-top: var(--space-lg); } p { margin-bottom: var(--space-md); } a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-dark); } /* ── Lists ── */ ul, ol { margin-bottom: var(--space-md); padding-left: var(--space-xl); } li { margin-bottom: var(--space-xs); } /* ── Components ── */ .container { width: 100%; max-width: var(--max-width-page); margin-left: auto; margin-right: auto; padding-left: var(--space-lg); padding-right: var(--space-lg); } .button { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-sm) var(--space-xl); font-weight: var(--font-weight-medium); text-decoration: none; border-radius: var(--radius-md); transition: all var(--transition-fast); cursor: pointer; border: 1px solid transparent; } .button-primary { background-color: var(--color-primary); color: white; } .button-primary:hover, .button-primary:focus-visible { background-color: var(--color-primary-dark); color: white; } .button-accent { background-color: var(--color-accent); color: white; } .button-accent:hover, .button-accent:focus-visible { background-color: var(--color-primary-dark); color: white; } .button-outline { background-color: transparent; border-color: var(--color-primary); color: var(--color-primary); } .button-outline:hover, .button-outline:focus-visible { background-color: var(--color-primary-light); } /* ── Utility ── */ .text-lg { font-size: var(--text-lg); } .mt-xs { margin-top: var(--space-xs); } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mt-2xl { margin-top: var(--space-2xl); } .mt-4xl { margin-top: var(--space-4xl); } .mb-md { margin-bottom: var(--space-md); } .mb-xl { margin-bottom: var(--space-xl); } .mb-4xl { margin-bottom: var(--space-4xl); } .text-center { text-align: center; } .justify-center { justify-content: center; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .skip-link { position: absolute; top: -100px; left: 0; background: var(--color-primary-dark); color: white; padding: var(--space-md) var(--space-lg); z-index: calc(var(--z-modal) + 1); text-decoration: none; font-weight: var(--font-weight-bold); transition: top var(--transition-fast); } .skip-link:focus { top: 0; } :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; } [hidden] { display: none !important; } /* ── Reduced Motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Journey Stage Accents ── */ /* Applied via data-journey-stage on . Sets a stage-specific accent that can be used by components for borders, highlights. */ [data-journey-stage="rock"] { --color-stage-active: var(--color-stage-rock); --color-stage-active-bg: var(--color-stage-rock-bg); } [data-journey-stage="rock-boat"] { --color-stage-active: var(--color-stage-boat); --color-stage-active-bg: var(--color-stage-rock-bg); } [data-journey-stage="boat"] { --color-stage-active: var(--color-stage-boat); --color-stage-active-bg: var(--color-stage-boat-bg); } [data-journey-stage="swan"] { --color-stage-active: var(--color-stage-swan); --color-stage-active-bg: var(--color-stage-swan-bg); } [data-journey-stage="bird"] { --color-stage-active: var(--color-stage-bird); --color-stage-active-bg: var(--color-stage-bird-bg); }