/* * base.css * Element-level defaults. No class selectors, no layout, no components. * Loaded after tokens.css. Load order: tokens.css → base.css → utilities.css → components.css * * Only bare HTML elements are styled here. * All values reference tokens from tokens.css. */ /* ─── Reset ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ─── Root & body ─────────────────────────────────────────────────────────── */ html { font-size: 100%; /* respects user's browser font size setting */ text-size-adjust: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-family-base); font-size: var(--font-size-md); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); color: var(--color-text-primary); background-color: var(--color-bg-page); background-image: var(--asset-bg-page-tile); background-repeat: repeat; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100dvh; } /* ─── Skip navigation link ────────────────────────────────────────────────── */ /* First element inside . Visible only on keyboard focus. */ /* Defined here — do not redefine in components.css or inline. */ /* html-document.mdc shows the required HTML structure. */ .skip-link { position: absolute; top: var(--space-2); left: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--color-bg-surface); color: var(--color-text-primary); border: 2px solid var(--color-border-focus); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-decoration: none; transform: translateY(-200%); transition: transform 0.2s ease; z-index: 9999; } .skip-link:focus { transform: translateY(0); } /* ─── Headings ────────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { color: var(--color-text-primary); line-height: var(--line-height-tight); font-weight: var(--font-weight-bold); text-wrap: balance; } h1 { font-size: var(--font-size-4xl); letter-spacing: var(--letter-spacing-tight); } h2 { font-size: var(--font-size-3xl); letter-spacing: var(--letter-spacing-tight); } h3 { font-size: var(--font-size-2xl); } h4 { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug); } h5 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug); } h6 { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug); } /* ─── Body text ───────────────────────────────────────────────────────────── */ p { color: var(--color-text-primary); text-wrap: pretty; /* avoids orphaned words on last line */ max-width: 75ch; /* comfortable reading line length */ } p + p { margin-top: var(--space-4); } strong, b { font-weight: var(--font-weight-bold); } em, i { font-style: italic; } small { font-size: var(--font-size-sm); color: var(--color-text-secondary); } mark { background: var(--color-warning-bg); color: var(--color-warning-text); padding-inline: var(--space-1); border-radius: var(--radius-sm); } abbr[title] { text-decoration: underline dotted; cursor: help; } /* ─── Links ───────────────────────────────────────────────────────────────── */ a { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s ease; } a:hover { color: var(--color-text-link-hover); } a:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* ─── Lists ───────────────────────────────────────────────────────────────── */ ul, ol { padding-inline-start: var(--space-6); } li { margin-block-start: var(--space-2); line-height: var(--line-height-normal); } li:first-child { margin-block-start: 0; } /* Remove list styling when list is direct child of nav */ nav ul, nav ol { list-style: none; padding: 0; } /* ─── Code & preformatted text ────────────────────────────────────────────── */ code, kbd, samp { font-family: var(--font-family-mono); font-size: var(--font-size-sm); background: var(--color-bg-sunken); color: var(--color-text-primary); padding: 0.1em var(--space-1); border-radius: var(--radius-sm); border: 1px solid var(--color-border-default); } pre { font-family: var(--font-family-mono); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); background: var(--color-bg-sunken); color: var(--color-text-primary); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--color-border-default); overflow-x: auto; tab-size: 2; } pre code { background: none; border: none; padding: 0; font-size: inherit; } /* ─── Blockquote ──────────────────────────────────────────────────────────── */ blockquote { border-inline-start: 3px solid var(--color-border-strong); padding-inline-start: var(--space-5); color: var(--color-text-secondary); font-style: italic; } blockquote cite { display: block; margin-block-start: var(--space-2); font-size: var(--font-size-sm); font-style: normal; color: var(--color-text-subtle); } /* ─── Horizontal rule ─────────────────────────────────────────────────────── */ hr { border: none; border-block-start: 1px solid var(--color-border-default); margin-block: var(--space-8); } /* ─── Images & media ──────────────────────────────────────────────────────── */ img, video, svg { display: block; max-width: 100%; height: auto; } figure { margin: 0; } figcaption { font-size: var(--font-size-xs); color: var(--color-text-subtle); margin-block-start: var(--space-2); text-align: center; } /* ─── Tables ──────────────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } th { font-weight: var(--font-weight-medium); text-align: start; color: var(--color-text-secondary); padding: var(--space-2) var(--space-4); border-block-end: 2px solid var(--color-border-default); } td { padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--color-border-default); color: var(--color-text-primary); vertical-align: top; } tr:last-child td { border-block-end: none; } /* ─── Forms ───────────────────────────────────────────────────────────────── */ label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); margin-block-end: var(--space-1); } input, textarea, select { display: block; width: 100%; font-family: var(--font-family-base); font-size: var(--font-size-md); color: var(--color-text-primary); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); line-height: var(--line-height-snug); transition: border-color 0.15s ease, box-shadow 0.15s ease; appearance: none; -webkit-appearance: none; } input:hover, textarea:hover, select:hover { border-color: var(--color-border-strong); } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--color-border-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-border-focus) 20%, transparent); scroll-margin-top: var(--space-16); } input::placeholder, textarea::placeholder { color: var(--color-text-subtle); } input[disabled], textarea[disabled], select[disabled] { opacity: 0.5; cursor: not-allowed; background: var(--color-bg-sunken); } input[type='checkbox'], input[type='radio'] { width: auto; display: inline-block; accent-color: var(--color-interactive-primary); } textarea { resize: vertical; min-height: 100px; } select { /* Hardcoded hex required: CSS custom properties cannot be used inside url() data URIs. %2397a0af = #97a0af = --spectrum-neutral-600. Update here if that token changes. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2397a0af' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-inline-end: var(--space-8); } fieldset { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); } legend { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); padding-inline: var(--space-1); } /* ─── Buttons ─────────────────────────────────────────────────────────────── */ button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-family-base); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); line-height: var(--line-height-snug); min-height: 44px; /* WCAG touch target */ padding-block: var(--space-2); padding-inline: var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; user-select: none; -webkit-user-select: none; /* Default: neutral/ghost — add .btn-primary or utility classes for color */ background: transparent; color: var(--color-text-primary); border-color: var(--color-border-default); } button:hover { background: var(--color-bg-sunken); border-color: var(--color-border-strong); } button:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; scroll-margin-top: var(--space-16); } button:active { transform: scale(0.98); } button[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; pointer-events: none; } /* ─── Landmark layout ─────────────────────────────────────────────────────── */ header, main, footer, nav, aside, section, article { display: block; /* safe fallback for very old browsers */ } /* main: no default min-height — a global min-height stacks below full-viewport headers/heroes and causes unwanted scroll on short pages. Use utilities (e.g. min-h-screen) or page-level layout when a tall main region is needed. */ /* ─── Details & summary ───────────────────────────────────────────────────── */ details { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: var(--space-4); } summary { font-weight: var(--font-weight-medium); cursor: pointer; user-select: none; -webkit-user-select: none; list-style: none; /* removes default triangle in some browsers */ } summary::-webkit-details-marker { display: none; } summary:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; border-radius: var(--radius-sm); } details[open] summary { margin-block-end: var(--space-3); } /* ─── Dialog ──────────────────────────────────────────────────────────────── */ dialog { background: var(--color-bg-surface); color: var(--color-text-primary); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: var(--space-8); max-width: min(560px, calc(100vw - var(--space-8))); width: 100%; box-shadow: 0 8px 32px color-mix(in srgb, var(--color-bg-overlay) 20%, transparent); } dialog::backdrop { background: color-mix(in srgb, var(--color-bg-overlay) 50%, transparent); } /* ─── Focus: global visible fallback ─────────────────────────────────────── */ /* Catches any interactive element not explicitly styled above. */ :focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; } /* Explicitly remove focus ring for mouse users */ :focus:not(:focus-visible) { outline: none; } /* ─── 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; } } /* ─── Selection ───────────────────────────────────────────────────────────── */ ::selection { background: var(--color-info-bg); color: var(--color-info-text); } /* ─── Scrollbar (Chromium) ────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--color-bg-page); } ::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); border: 2px solid var(--color-bg-page); } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); }