@import 'tokens/fonts.css';
@import 'tokens/colors.css';
@import 'tokens/typography.css';
@import 'tokens/spacing.css';
@import 'tokens/effects.css';
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:96px}
body{font-family:var(--font-body);color:var(--text-primary);background:var(--color-paper)}
a{color:var(--brand-ink);text-decoration:none}
a:hover{color:var(--color-indigo);text-decoration:underline}
button,a,label,summary,select,[role="button"],[role="tab"],[role="link"],input[type="checkbox"],input[type="radio"],input[type="submit"],input[type="button"]{cursor:pointer}
button:disabled,[aria-disabled="true"]{cursor:not-allowed}
.mega-btn{transition:background var(--duration-slow) var(--ease-standard),border-color var(--duration-slow) var(--ease-standard),color var(--duration-slow) var(--ease-standard)}
.mega-btn--primary:not(:disabled):hover{background:color-mix(in oklch,var(--brand) 86%,#000)}
.mega-btn--indigo:not(:disabled):hover{background:color-mix(in oklch,var(--color-indigo) 88%,#fff)}
.mega-btn--secondary:not(:disabled):hover{background:rgba(128,128,128,.14);border-color:var(--color-indigo)}
.mega-btn--secondaryOnDark:not(:disabled):hover{background:rgba(128,128,128,.5);border-color:rgba(255,255,255,.55)}
.mega-btn--ghost:not(:disabled):hover{background:rgba(128,128,128,.12)}