/* ============================================================= Encoded - colors_and_type.css The single source of truth for color, type, and rhythm tokens. Legacy page layout adapted to the 2026 Encoded visual system. Shared design-system styles follow this block and govern the visible chrome. ============================================================= */ /* Brand fonts load via + preconnect in , fetched in parallel during HTML parse rather than through a render-blocking @import. */ :root { /* ---------- BRAND CORE ---------- */ --r: #FF4F00; /* International Orange */ --r-hover: #E64700; /* hover accent */ --r-pressed: #B83900; /* pressed accent */ --r-light: #FFF0E8; /* tint backgrounds, never type */ --k: #0A0A0A; /* Black - text + dark surfaces */ --w: #FFFFFF; /* White - primary canvas */ /* ---------- NEUTRAL SCALE (pure, no warmth) ---------- */ --g50: #F6F6F6; /* subtlest paper / hover surface */ --g100: #EBEBEB; /* hairline borders, dividers, ghost numerals */ --g200: #D4D4D4; /* secondary borders, disabled type on dark */ --g400: #9C9C9C; /* eyebrow type, captions */ --g600: #6B6B6B; /* secondary body */ --g800: #333333; /* near-black body */ /* ---------- FUNCTIONAL ACCENTS ---------- */ --moss: #2C3E2D; /* protocol / spec surfaces */ --moss-light: #E4EBE4; --amber: #FF4F00; /* illustration emphasis */ /* ---------- SEMANTIC COLOR (fg/bg) ---------- */ --fg-1: var(--k); /* primary text */ --fg-2: var(--g800); /* near-black body */ --fg-3: var(--g600); /* secondary body */ --fg-4: var(--g400); /* eyebrow / caption */ --fg-accent: var(--r); --fg-on-dark: var(--w); --fg-on-dark-2: var(--g200); --fg-on-dark-3: var(--g400); --fg-on-dark-4: var(--g600); --bg-paper: var(--w); --bg-paper-2: var(--g50); /* spec/code zebra backdrop */ --bg-ink: var(--k); --bg-code: #1A1714; /* code body header */ --rule: var(--g100); /* 0.5px hairline */ --rule-strong: var(--k); /* ---------- TYPE STACKS ---------- */ --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --serif: 'Aeonik', 'Iowan Old Style', Georgia, serif; --mono: 'Geist Mono', 'SF Mono', Menlo, Consolas, monospace; /* ---------- TYPE SCALE (px-based; toolkit-true) ---------- */ --type-display-size: 80px; --type-display-weight: 500; --type-display-track: -0.035em; --type-display-leading: 0.92; --type-h1-size: 48px; --type-h1-weight: 500; --type-h1-track: -0.025em; --type-h1-leading: 0.96; --type-h2-size: 32px; --type-h2-weight: 500; --type-h2-track: -0.02em; --type-h2-leading: 1.05; --type-h3-size: 20px; --type-h3-weight: 600; --type-h3-track: -0.01em; --type-h3-leading: 1.15; --type-body-size: 16px; --type-body-weight: 400; --type-body-track: 0; --type-body-leading: 1.6; --type-small-size: 13px; --type-small-leading: 1.55; --type-eyebrow-size: 10px; --type-eyebrow-weight: 500; --type-eyebrow-track: 0.12em; --type-code-size: 14px; --type-code-track: 0.02em; --type-code-leading: 1.75; /* ---------- SPACING (8pt rhythm) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-18: 72px; --s-25: 100px; /* ---------- BORDERS / RADII ---------- */ --hairline: 0.5px solid var(--rule); --line: 1px solid var(--rule); --line-ink: 0.5px solid var(--k); --radius: 0; /* IMMUTABLE - square corners everywhere */ /* ---------- ELEVATION (no shadows; red offset blocks only) ---------- */ --offset-x: 12px; --offset-y: 12px; /* ---------- MOTION ---------- */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 400ms; } /* ============================================================= Base reset + body defaults ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--sans); font-size: var(--type-body-size); line-height: var(--type-body-leading); color: var(--fg-1); background: var(--bg-paper); text-rendering: optimizeLegibility; } /* ============================================================= Semantic type classes - drop-in selectors that match the toolkit. Use the class OR the equivalent HTML tag. ============================================================= */ .t-display, h1.display { font-family: var(--sans); font-size: var(--type-display-size); font-weight: var(--type-display-weight); letter-spacing: var(--type-display-track); line-height: var(--type-display-leading); } .t-h1, h1 { font-family: var(--sans); font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); letter-spacing: var(--type-h1-track); line-height: var(--type-h1-leading); } .t-h2, h2 { font-family: var(--sans); font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); letter-spacing: var(--type-h2-track); line-height: var(--type-h2-leading); } .t-h3, h3 { font-family: var(--sans); font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); letter-spacing: var(--type-h3-track); line-height: var(--type-h3-leading); } .t-body, p { font-family: var(--sans); font-size: var(--type-body-size); line-height: var(--type-body-leading); color: var(--fg-3); } .t-small { font-size: var(--type-small-size); line-height: var(--type-small-leading); color: var(--fg-3); } .t-eyebrow { font-family: var(--mono); font-size: var(--type-eyebrow-size); font-weight: var(--type-eyebrow-weight); letter-spacing: var(--type-eyebrow-track); text-transform: uppercase; color: var(--fg-4); } /* Serif - standalone editorial moments only. Never inline with sans. */ .t-quote, blockquote { font-family: var(--serif); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.2; font-style: italic; color: var(--fg-2); } /* Mono - eyebrows, code, paths, wordmark, UI labels */ code, pre, kbd, samp, .t-mono { font-family: var(--mono); font-size: var(--type-code-size); letter-spacing: var(--type-code-track); line-height: var(--type-code-leading); color: var(--fg-2); } /* The one structural punctuation: red underscore in the wordmark */ .wordmark { font-family: var(--mono); font-weight: 600; letter-spacing: 0.02em; color: var(--fg-1); } .wordmark .u { color: var(--r); } /* Inline emphasis - color (preferred) and weight only. Never serif italic inline. */ .em-color { color: var(--r); } .em-weight { font-weight: 700; } /* Links */ a { color: var(--fg-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 0.5px; } a:hover { color: var(--r); } /* Hairline rule helper */ hr, .rule { border: 0; height: 0; border-top: var(--hairline); margin: 0; }