/* ========================================================================== Apoxy Design System — Tokens The single source of truth for brand color (light + dark), type, spacing, radius, shadow, and motion across every web surface: - run/marketing — served at /assets/shared-tokens.css (a repo symlink in local dev; copied into the image by run/dagger/marketing.go) and pulled in by assets/tokens.css via @import. - run/blog — @import'd by app/blog.css at build time (Vite). - run/docs2 — @import'd by app/docs.css at build time (Vite). Surface-specific bits stay OUT of this file by design: @font-face rules (font URL paths differ per surface), layout vars (--container, --gutter, --topbar-h, ...), and base body classes each live in the consuming app's own stylesheet. ========================================================================== */ :root { /* --- Color: core palette --- Apoxy is monochromatic by design. Off-black on warm-white, with a single brand blue accent reserved for key CTAs and links. */ --apx-ink: #1E1D1C; /* near-black, all primary text + logos */ --apx-ink-2: #252122; /* line-illustration stroke */ --apx-graphite: #4A4847; /* body text, secondary */ --apx-slate: #6B6967; /* muted text, captions */ --apx-stone: #ABABAB; /* disabled, hairlines on dark */ --apx-fog: #D9D7D3; /* borders */ --apx-mist: #EDECE8; /* subtle dividers, inset surfaces */ --apx-paper: #F5F3EE; /* warm canvas, the signature surface */ --apx-bone: #FAF8F4; /* off-white card surface */ --apx-white: #FFFFFF; /* --- Color: accents --- Used sparingly. Blue is the only saturated hue in the system. */ --apx-blue: #3D91DC; /* primary action, links on hover */ --apx-blue-deep: #2E72B0; /* pressed / heading accents */ --apx-blue-tint: #E5F0FA; /* informational backgrounds */ --apx-violet: #AA94EB; /* media scrubber accent only */ --apx-coral: #EA6A4E; /* destructive, alerts */ --apx-coral-tint: #FBE8E2; --apx-leaf: #4F8A4A; /* success */ --apx-leaf-tint: #E2EEDF; --apx-amber: #C28A2A; /* warning */ --apx-amber-tint: #F7ECCE; /* --- Semantic surfaces --- */ --surface-canvas: var(--apx-paper); --surface-card: var(--apx-white); --surface-inset: var(--apx-mist); --surface-invert: var(--apx-ink); /* --- Semantic text --- */ --text-primary: var(--apx-ink); --text-secondary: var(--apx-graphite); --text-muted: var(--apx-slate); --text-disabled: var(--apx-stone); --text-on-invert: var(--apx-bone); --text-link: var(--apx-ink); --text-link-hover: var(--apx-blue); /* --- Semantic borders --- */ --border-strong: var(--apx-ink); --border-default: var(--apx-fog); --border-subtle: var(--apx-mist); /* --- Type --- */ --font-display: 'TWK Everett', 'Inter Display', 'Inter', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-body-sm: 'Inter Small', 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace; /* Display scale — TWK Everett, used for hero & section headers. The brand voice is restrained: tight tracking, no italics. */ --t-display-xl: clamp(56px, 8vw, 120px); /* hero */ --t-display-lg: clamp(44px, 6vw, 80px); /* section openers */ --t-display-md: clamp(34px, 4vw, 56px); --t-display-sm: clamp(28px, 3vw, 40px); /* UI scale — Inter, used everywhere else */ --t-h1: 40px; --t-h2: 32px; --t-h3: 24px; --t-h4: 20px; --t-h5: 16px; --t-body-lg: 18px; --t-body: 16px; --t-body-sm: 14px; --t-caption: 13px; --t-micro: 12px; --t-overline: 11px; --lh-display: 0.95; --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.55; --lh-loose: 1.7; --tr-display: -0.02em; --tr-tight: -0.01em; --tr-normal: 0; --tr-wide: 0.04em; --tr-overline: 0.12em; /* --- Spacing (4px base) --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* --- Radius --- Apoxy is square. Every surface — buttons, inputs, cards, modals, code blocks, badges, avatars, focus rings — has a 0 px corner. The only exception is the moving knob inside a toggle switch, which is a mechanical control, not a surface. */ --r-none: 0; --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-2xl: 0; --r-pill: 0; /* deprecated — kept at 0 for back-compat */ --r-knob: 50%; /* toggle-switch knob only */ /* --- Shadow --- Subtle, never blown out. The line-art carries weight; shadows just hint. */ --sh-none: none; --sh-1: 0 1px 0 rgba(30, 29, 28, 0.04), 0 1px 2px rgba(30, 29, 28, 0.06); --sh-2: 0 2px 4px rgba(30, 29, 28, 0.05), 0 4px 12px rgba(30, 29, 28, 0.06); --sh-3: 0 4px 8px rgba(30, 29, 28, 0.06), 0 12px 32px rgba(30, 29, 28, 0.08); --sh-4: 0 8px 16px rgba(30, 29, 28, 0.08), 0 24px 64px rgba(30, 29, 28, 0.12); --sh-focus: 0 0 0 3px rgba(61, 145, 220, 0.35); /* --- Motion --- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --d-fast: 120ms; --d-base: 200ms; --d-slow: 320ms; } /* --- Dark theme --- The same warm monochrome, inverted: ink and paper trade places, tints deepen. Surfaces that support a theme toggle (blog, docs2) set data-theme="dark" on ; marketing is light-only so this block is inert there. */ [data-theme='dark'] { --apx-paper: #1A1917; --apx-bone: #232220; --apx-mist: #2A2826; --apx-fog: #3A3735; --apx-stone: #5A5856; --apx-slate: #8E8B86; --apx-graphite: #C5C2BB; --apx-ink-2: #E5E3DD; --apx-ink: #F0EEE8; --apx-white: #1A1917; --apx-blue-tint: #1F2D3D; --apx-coral-tint: #3D2A24; --apx-leaf-tint: #233028; --apx-amber-tint: #3D331C; --surface-canvas: var(--apx-paper); --surface-card: var(--apx-bone); --surface-inset: var(--apx-mist); --surface-invert: var(--apx-ink); --text-primary: var(--apx-ink); --text-secondary: var(--apx-graphite); --text-muted: var(--apx-slate); --text-disabled: var(--apx-stone); --text-on-invert: var(--apx-bone); --border-strong: var(--apx-ink); --border-default: var(--apx-fog); --border-subtle: var(--apx-mist); color-scheme: dark; }