/* ───────────────────────────────────────────────────────────────────────── * OCTI — Design Tokens (CSS Custom Properties) * * Drop this file into your global stylesheet. Light mode is the default; * apply [data-theme="dark"] (e.g. on or ) for dark mode. * * * // or "dark" * * All tokens are prefixed with --octi-* so they don't collide with anything. * Aliases at the bottom map to semantic names if you want a shorter API. * ───────────────────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* ── CANVAS ─────────────────────────────────────────────────────── */ --octi-canvas: #F4F5F0; /* page background — near-white, faint cool-green */ --octi-paper: #FAFAF6; /* slightly warmer surface for cards-in-cards */ --octi-surface: #FFFFFF; /* default raised card */ --octi-surface-muted: #ECEDE6; /* hover, subtle panel, code blocks */ /* ── INK ────────────────────────────────────────────────────────── */ --octi-ink: #15171C; /* primary text */ --octi-ink-strong: #0B0D11; /* hero headlines */ --octi-ink-soft: #5A5C61; /* secondary text, body when low-priority */ --octi-ink-whisper: #A2A39E; /* tertiary, captions, disabled */ /* ── BORDERS ────────────────────────────────────────────────────── */ --octi-border: #DCDDD6; /* default card border */ --octi-border-soft: #E8E9E1; /* hairlines, list dividers */ --octi-border-strong: #C7C8C0; /* emphasised borders, secondary buttons */ /* ── TEAL (THE single accent) ───────────────────────────────────── */ --octi-teal: #0C3B43; /* signature accent — use sparingly */ --octi-teal-soft: #356C72; /* secondary teal — meta labels */ --octi-teal-wash: #E3ECEC; /* very pale teal — backgrounds, mind-changer cards */ --octi-teal-ink: #E8E1D2; /* text on teal-deep surfaces (sidebars etc.) */ /* ── CONFIDENCE / STATE ─────────────────────────────────────────── */ --octi-confident: #3D8C7B; /* high-confidence claims, success, delivered */ --octi-caution: #B8853C; /* medium-confidence claims, in-flight */ --octi-alert: #B84E26; /* single-source / flagged / awaiting */ /* ── SHADOWS ────────────────────────────────────────────────────── */ --octi-shadow-sm: 0 1px 0 rgba(21, 23, 28, 0.02), 0 2px 8px -4px rgba(21, 23, 28, 0.06); --octi-shadow-md: 0 1px 0 rgba(21, 23, 28, 0.02), 0 12px 30px -22px rgba(21, 23, 28, 0.14); --octi-shadow-lg: 0 1px 0 rgba(21, 23, 28, 0.03), 0 24px 60px -32px rgba(21, 23, 28, 0.20); --octi-focus-ring: 0 0 0 4px var(--octi-teal-wash); /* ── TYPE FAMILIES ──────────────────────────────────────────────── */ --octi-font-display: "Newsreader", "Iowan Old Style", Georgia, serif; --octi-font-body: "General Sans", "Inter", system-ui, sans-serif; --octi-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ── TYPE SCALE ─────────────────────────────────────────────────── */ /* Display — Newsreader italic 400, letter-spacing -0.018em */ --octi-text-display-xl: 56px; /* hero on workspace */ --octi-text-display-lg: 48px; /* page H1 */ --octi-text-display-md: 32px; /* section H2 */ --octi-text-display-sm: 24px; /* claim quote, sub-H2 */ /* Body — General Sans */ --octi-text-body-lg: 18px; /* lede paragraph, important body */ --octi-text-body: 15px; /* default UI body */ --octi-text-body-sm: 13px; /* secondary UI */ --octi-text-body-xs: 12px; /* metadata */ /* Mono — JetBrains Mono */ --octi-text-mono-md: 11px; /* kickers, breadcrumbs */ --octi-text-mono-sm: 10px; /* tiny labels — usually UPPERCASED with 0.22em tracking */ /* ── LINE HEIGHTS ───────────────────────────────────────────────── */ --octi-leading-tight: 1.08; /* display */ --octi-leading-snug: 1.32; /* claim italic quotes */ --octi-leading-normal: 1.55; /* body */ --octi-leading-relaxed: 1.7; /* long-form reading */ /* ── LETTER SPACING ─────────────────────────────────────────────── */ --octi-tracking-display: -0.018em; /* tightens Newsreader at large sizes */ --octi-tracking-snug: -0.005em; /* mid sizes */ --octi-tracking-kicker: 0.22em; /* uppercased mono kickers */ --octi-tracking-mono: 0.04em; /* default mono */ /* ── SPACING SCALE (4-based) ────────────────────────────────────── */ --octi-space-1: 4px; --octi-space-2: 8px; --octi-space-3: 12px; --octi-space-4: 16px; --octi-space-5: 20px; --octi-space-6: 24px; --octi-space-8: 32px; --octi-space-10: 40px; --octi-space-12: 48px; --octi-space-14: 56px; --octi-space-16: 64px; --octi-space-20: 80px; /* ── RADII ──────────────────────────────────────────────────────── */ --octi-radius-sm: 6px; /* source pills, weight bars */ --octi-radius-md: 10px; /* inputs, small cards */ --octi-radius-lg: 16px; /* default card */ --octi-radius-xl: 24px; /* hero cards */ --octi-radius-pill: 999px; /* buttons, chips */ /* ── MOTION ─────────────────────────────────────────────────────── */ --octi-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* default */ --octi-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* hover lift */ --octi-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* sidebar expand */ --octi-dur-fast: 120ms; /* hover, focus */ --octi-dur-base: 200ms; /* tab switches, state changes */ --octi-dur-slow: 400ms; /* page transitions */ --octi-dur-spring: 360ms; /* spring animations */ /* ── LAYOUT ─────────────────────────────────────────────────────── */ --octi-content-max: 1240px; /* main column max-width */ --octi-reading-max: 720px; /* long-form reading width */ --octi-page-pad-x: 40px; /* horizontal page padding */ --octi-page-pad-y: 64px; /* vertical page padding */ } /* ─── DARK MODE ────────────────────────────────────────────────────── * Apply with [data-theme="dark"]. Identity holds; tokens invert and the * teal accent shifts to a brighter variant that holds up on dark canvas. * ──────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --octi-canvas: #13141A; --octi-paper: #1A1C22; --octi-surface: #1F2128; --octi-surface-muted: #23252D; --octi-ink: #F2F1EA; --octi-ink-strong: #FFFEF8; --octi-ink-soft: #A6A39A; --octi-ink-whisper: #5F5E58; --octi-border: #2C2E36; --octi-border-soft: #222530; --octi-border-strong: #3A3D47; --octi-teal: #5BA6AD; --octi-teal-soft: #3D7D84; --octi-teal-wash: #1B2E30; --octi-teal-ink: #E8E1D2; --octi-confident: #5BC2A8; --octi-caution: #D9A85A; --octi-alert: #E6724A; --octi-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.20), 0 2px 8px -4px rgba(0, 0, 0, 0.40); --octi-shadow-md: 0 1px 0 rgba(0, 0, 0, 0.20), 0 12px 30px -22px rgba(0, 0, 0, 0.50); --octi-shadow-lg: 0 1px 0 rgba(0, 0, 0, 0.20), 0 24px 60px -32px rgba(0, 0, 0, 0.60); --octi-focus-ring: 0 0 0 4px var(--octi-teal-wash); } /* ─── RESPECT REDUCED MOTION ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --octi-dur-fast: 1ms; --octi-dur-base: 1ms; --octi-dur-slow: 1ms; --octi-dur-spring: 1ms; } } /* ─── HELPER CLASSES (optional — feel free to ignore) ─────────────── */ .octi-kicker { font-family: var(--octi-font-mono); font-size: var(--octi-text-mono-sm); letter-spacing: var(--octi-tracking-kicker); text-transform: uppercase; color: var(--octi-teal); font-weight: 600; } .octi-display { font-family: var(--octi-font-display); font-style: italic; font-weight: 400; letter-spacing: var(--octi-tracking-display); line-height: var(--octi-leading-tight); color: var(--octi-ink); } .octi-card { background: var(--octi-surface); border: 1px solid var(--octi-border); border-radius: var(--octi-radius-lg); padding: var(--octi-space-5) var(--octi-space-6); } .octi-button { font-family: var(--octi-font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; padding: 10px 18px; border-radius: var(--octi-radius-pill); border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background var(--octi-dur-fast) var(--octi-ease), transform var(--octi-dur-fast) var(--octi-ease); } .octi-button--primary { background: var(--octi-ink); color: var(--octi-canvas); } .octi-button--teal { background: var(--octi-teal); color: var(--octi-teal-ink); } .octi-button--ghost { background: transparent; color: var(--octi-ink); border: 1px solid var(--octi-border-strong); } .octi-button:hover { transform: translateY(-1px); } .octi-button:focus-visible { outline: none; box-shadow: var(--octi-focus-ring); }