/* Attention Deficit, parent-site design tokens. * * Source of truth = the Claude design system 90f0f32d (tokens/colors.css + typography.css), * read 2026-07-25. This file is the SINGLE home for the palette, type, and depth ramp both the * fold (index.html) and the research blog (research.html) reference, change a value here, never * inline in a page. NOTE: this is the PARENT brand system (forest/cream/charcoal), distinct from * the Focus Metrics APP system (ember/white, app/src/index.css). Do not cross them. */ :root { color-scheme: light; /* --- brand: deep forest is the one accent (founder 2026-07-25, supersedes ember/oxblood) --- */ --forest: #013927; /* the one brand accent */ --forest-600: #012E1F; /* hover / press */ --forest-300: #6FA48F; /* soft sage, on-dark accent + the depth glow */ --oxblood: #380301; /* records / "myth" grade ONLY */ --green: #2C6E4F; /* --- paper (warm cream, not raw white, the design system's paper) --- */ --paper: #F4F0E7; /* page */ --paper-sunken: #EBE3D6; /* wells / cards */ --paper-raised: #FBF8F2; /* raised surfaces */ /* --- ink --- */ --ink: #383838; /* primary text */ --ink-700: #4C4A45; /* body long-form */ --ink-500: #5E5A53; /* secondary labels */ --ink-400: #6E6A62; /* faint / captions */ --line: rgba(56, 56, 56, .12); --line-strong: rgba(56, 56, 56, .26); /* --- type: one face, Inter, weight + tracking do the work --- */ --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --tracking-display: -0.03em; --tracking-cap: 0.06em; --tracking-label: 0.14em; /* --- depth ladder: each click deeper gradients the page toward black (black only at the leaf). * Borrowed from the app's Live focus-flood: going deep goes dark. Applied to as * body[data-depth="N"] on the fold. See index.html. --- */ --depth-1: #1F4A39; --depth-2: #01382A; --depth-3: #012E22; --depth-4: #012A20; --depth-5: #012019; --depth-6: #011710; --depth-7: #010D09; --depth-8: #000000; } /* Shared primitives both pages use */ * { margin: 0; padding: 0; box-sizing: border-box; } html { background: var(--paper); } body { color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; line-height: 1.5; } a { color: inherit; } img { max-width: 100%; } a, button, input { font-family: inherit; } .cap { font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-cap); text-transform: uppercase; color: var(--ink-400); } :focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; } /* The parent mark, charcoal square carrying a split forest/cream person silhouette (icon #53). * Inlined as a background data-URI so it needs no extra request and works offline. The light * variant (cream square) is applied by the host page for dark surfaces (see each page's CSS). */ .mark { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: inherit; text-decoration: none; border: 0; background: none; cursor: pointer; } .mark .dot { width: 22px; height: 22px; flex: 0 0 auto; background-size: contain; background-repeat: no-repeat; background-image: url('data:image/svg+xml;utf8,'); }