/* ============================================================================ Marc Infotech — base.css ---------------------------------------------------------------------------- Loads: modern reset, :root tokens (imported from 02-tokens.css), global typography, base element styling. Order is intentional: 1. tokens import (single source of truth) 2. reset (strip browser defaults, establish sane defaults) 3. root/html/body (canvas, theme, default text) 4. typography (h1-h6, p, ul, code, pre, blockquote) 5. media elements (img, svg, video) 6. utilities (sr-only, flow) Load order in HTML: this file FIRST, then components.css, then layout.css. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ @import url('../design/02-tokens.css'); /* -------------------------------------------------------------------------- 2. Modern reset (Andy Bell-style, trimmed) -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html, body { height: 100%; } body { line-height: var(--lh-normal); font-family: var(--font-sans); font-size: var(--fs-body); color: var(--color-text); background-color: var(--color-bg); /* prevent horizontal scroll on every viewport — defensive against accidental 100vw children and the iOS rubber-band */ overflow-x: hidden; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul, ol { list-style: none; padding: 0; } #root, #__next { isolation: isolate; } /* Remove default focus ring for mouse, but keep accessible keyboard focus */ :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; } /* -------------------------------------------------------------------------- 3. Document-level theme -------------------------------------------------------------------------- */ :root { color-scheme: dark; /* Default theme is dark. [data-theme="light"] on switches. */ } [data-theme="light"] { color-scheme: light; } /* -------------------------------------------------------------------------- 4. Typography -------------------------------------------------------------------------- Type discipline: - headlines: serif (Source Serif 4) — does 80% of the work - body / UI: sans (Inter) - mono (JetBrains Mono): reserved for code, terminal, section numbers ------------------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--color-text); letter-spacing: var(--tracking-tight); text-wrap: balance; } h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); } h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); } h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); } h4 { font-size: 1.0625rem; line-height: var(--lh-snug); } h5 { font-size: 1rem; line-height: var(--lh-snug); font-weight: var(--fw-medium); } h6 { font-size: var(--fs-small); line-height: var(--lh-snug); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-family: var(--font-sans); } p { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text); text-wrap: pretty; max-width: 65ch; } p + p { margin-top: var(--space-4); } strong, b { font-weight: var(--fw-semibold); } em, i { font-style: italic; } small { font-size: var(--fs-small); } a:not([class]) { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--motion-fast); } a:not([class]):hover { color: var(--color-accent-hover); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-mono); } code { background-color: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.1em 0.35em; color: var(--color-text); } pre { background-color: var(--color-term-bg); border: 1px solid var(--color-term-border); border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; line-height: 1.6; } pre code { background: none; border: none; padding: 0; font-size: inherit; } blockquote { border-left: 2px solid var(--color-accent); padding-left: var(--space-4); margin: var(--space-6) 0; color: var(--color-text-muted); font-style: italic; } hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-12) 0; } ::selection { background-color: var(--color-accent-soft); color: var(--color-text); } /* -------------------------------------------------------------------------- 5. Media -------------------------------------------------------------------------- */ img { border-radius: inherit; } svg { fill: currentColor; } /* -------------------------------------------------------------------------- 6. Utilities -------------------------------------------------------------------------- */ /* Visually hidden but readable by screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Eyebrow label — small, mono, uppercase, accent. Used above hero h1 and section h2. */ .eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-accent); display: inline-block; margin-bottom: var(--space-4); } /* Inline mono label — section numbers like "01" */ .mono-label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-wide); color: var(--color-text-muted); } /* Generous content width for prose blocks */ .prose { max-width: var(--container-content); }