/* ============================================================ MARGIN.CEO — DESIGN TOKENS ============================================================ Source of truth for color, type, spacing, motion. Mirrors what's compiled into margin.ceo's index.html / hq / assessment, lifted into reusable CSS custom properties so any surface can opt in. Light is the default. Dark is opt-in via [data-theme="dark"] on or any ancestor. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"); /* ------------------------------------------------------------ COLOR — light theme (default) ------------------------------------------------------------ */ :root { /* Surface */ --bg: #FFFFFF; /* white — page bg (Mozart Phosphor Daylight) */ --bg-alt: #F1F4F1; /* hover wells, subtle fills */ --card: #FFFFFF; /* white card surface */ /* Ink */ --ink: #11150F; /* primary text + brand black */ --muted: #5C6B5E; /* secondary text, helpers */ --soft: #E0E6E0; /* hairline rules, tracks, borders */ /* Brand accent — Mozart green */ --accent: #12A24B; /* primary brand color */ --accent-hi: #0B7D39; /* hover/pressed */ --accent-lo: #4FE08A; /* light scanline / chip highlight */ --accent-dk: #096530; /* shadow / chip body shadow */ /* Semantic palette — only used in dashboards/charts */ --green: #3F7A5E; /* success / "done" ticker */ --sage: #BCD1CA; /* chip cry-tear / cool accent */ --purple: #827DBD; /* chip party hat / cool accent */ --yellow: #E8C27A; /* chip stars / hard hat */ --brown: #6B4A33; /* chip book / coffee */ --steel: #9C9A92; /* chip wrench / inactive */ /* ------------------------------------------------------------ TYPE — JetBrains Mono is the brand voice. There is one font. ------------------------------------------------------------ */ --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, "Courier New", monospace; --font-body: var(--font-mono); --font-display: var(--font-mono); /* Base — shared by nearly every body string */ --fs-body: 13.5px; --lh-body: 1.6; --fw-regular: 400; --fw-medium: 500; --fw-bold: 600; /* Display / hero */ --fs-h1: 34px; /* hero headline */ --lh-h1: 1.22; --tk-h1: -0.01em; --fs-h2: 28px; /* page title in hq */ --lh-h2: 1.22; --fs-h3: 22px; /* card title / step question */ --lh-h3: 1.3; --fs-h4: 18px; /* card heading */ --lh-h4: 1.3; --fs-h5: 15px; /* action card title */ --lh-h5: 1.3; /* Utility */ --fs-lede: 14px; /* hero sub-text, blockquote */ --fs-meta: 12px; /* helper, hint */ --fs-eyebrow: 11px; /* uppercase eyebrow / nav / button */ --fs-micro: 10px; /* footnote, status */ --fs-tiny: 9px; /* sidebar group label */ --tk-eyebrow: 0.08em; --tk-micro: 0.14em; --tk-loose: 0.18em; /* ------------------------------------------------------------ SPACING / RADII / BORDERS ------------------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; --radius-0: 0; /* the default — nothing rounds */ --radius-pill: 9999px;/* avatars only */ --border-hairline: 1px; --stroke-diagram: 0.5px; /* hairline used in ASCII-style diagrams */ /* ------------------------------------------------------------ MOTION ------------------------------------------------------------ */ --ease-out: cubic-bezier(.2, .65, .3, 1); --ease-snap: cubic-bezier(.34, 1.56, .64, 1); /* peekaboo overshoot */ --ease-quick: cubic-bezier(.4, 1.4, .6, 1); --dur-fast: 0.12s; --dur-base: 0.2s; --dur-slow: 0.4s; /* ------------------------------------------------------------ LAYOUT ------------------------------------------------------------ */ --maxw-prose: 720px; --maxw-page: 820px; --maxw-app: 880px; --sidebar-w: 240px; --header-h: 64px; } /* ------------------------------------------------------------ COLOR — dark theme ------------------------------------------------------------ */ [data-theme="dark"] { --bg: #07110A; --bg-alt: #0E1C12; --card: #0E1C12; --ink: #E4EDE4; --muted: #8FA694; --soft: #1E3326; --accent: #4FE08A; --accent-hi: #12A24B; --green: #4FE08A; } /* ============================================================ SEMANTIC ELEMENT STYLES ------------------------------------------------------------ These are the canonical defaults — body, h1-h5, p, a, code, selection, focus. Surfaces that just import this file inherit the brand voice for free. ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); } html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } body { font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; transition: background var(--dur-base) ease, color var(--dur-base) ease; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-medium); text-transform: lowercase; margin: 0; } h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tk-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.01em; } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -0.01em; } h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: -0.01em; } h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: -0.01em; } p { margin: 0 0 var(--space-3); line-height: var(--lh-body); } a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease; } a:hover { color: var(--accent); border-bottom-color: var(--accent); } code, pre, kbd, samp { font-family: var(--font-mono); } ::selection { background: var(--accent); color: var(--bg); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ============================================================ BRAND UTILITY CLASSES — opt-in helpers used across surfaces ============================================================ */ /* Eyebrow — terracotta uppercase label, often prefixed "//" */ .eyebrow { font-size: var(--fs-eyebrow); letter-spacing: var(--tk-micro); text-transform: lowercase; color: var(--accent); font-weight: var(--fw-bold); } /* Inline comment — muted "// like this" line */ .comment { color: var(--muted); font-size: var(--fs-eyebrow); letter-spacing: 0.04em; } /* Section header w/ horizontal rule on the right */ .sec-head { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-9) 0 var(--space-6); } .sec-head .label { font-size: var(--fs-eyebrow); letter-spacing: var(--tk-eyebrow); text-transform: lowercase; color: var(--muted); white-space: nowrap; margin: 0; } .sec-head .label b { color: var(--ink); font-weight: var(--fw-bold); } .sec-head .rule { flex: 1; border-bottom: 1px solid var(--soft); } /* Cursor block — orange blinking caret */ .cursor { display: inline-block; width: 12px; height: 28px; background: var(--accent); vertical-align: -4px; margin-left: 4px; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } }