/* ============================================================================ MENSCH — DESIGN TOKENS The single source of truth. Every colour, space, size, radius, shadow and motion value in the site lives here and only here. Contract: if it isn't a token, it doesn't ship. Components reference var(--token); they never carry raw hex or magic pixel values. Loaded first on every page, before any other stylesheet. ============================================================================ */ :root { /* ── CANVAS ─────────────────────────────────────────────────────────────── One warm dark canvas. Never pure #000 — the warmth is the point. */ --canvas: #2A0800; /* page background, footer, section beds */ --canvas-deep: #1B0800; /* recessed wells, gradient bottoms */ --canvas-void: #050402; /* the true floor — shadow tint, video mattes */ --surface: #141417; /* raised neutral panel (Brand OS lab) */ --surface-2: #191A1E; /* panel, one step lighter */ --neutral-900: #1A1A1A; /* neutral wells, avatar backers */ --neutral-950: #0E0F13; /* deepest neutral — terminal, code, mattes */ /* Light surfaces — the two places the site inverts (paper cards, Then side) */ --paper: #F5F4EE; --paper-dim: #A09D85; /* Sky — the two hero backdrops that sit outside the soil canvas */ --canvas-sky: #0A1A26; /* About hero, night sky */ --sky-light: #74B3E2; /* Brand OS hero, day sky */ /* Traffic-light dots — a literal macOS window illustration, nothing else */ --dot-red: #FF5F57; --dot-amber: #FEBC2E; --dot-green: #28C840; /* ── INK ────────────────────────────────────────────────────────────────── Cream is the primary text colour. Pure white is a display moment — wordmarks, hero type, nav — not the workhorse. */ --ink: #EBE9D9; /* body copy, primary text */ --ink-strong: #FFFFFF; /* display type, wordmark, nav — rationed */ --ink-muted: rgba(235,233,217,.86); --ink-soft: rgba(235,233,217,.60); --ink-faint: rgba(235,233,217,.38); --ink-on-accent: #2A0800; /* text sitting on an orange fill */ /* ── ACCENT ─────────────────────────────────────────────────────────────── One orange, three states. A moment — never a surface. Links, primary actions, focus rings, active nav. Nothing else. */ --accent: #FB3F0C; --accent-hover: #FD6A3D; --accent-deep: #D42D00; --accent-tint: rgba(251,63,12,.12); --accent-ring: rgba(251,63,12,.40); --accent-ring-fade: rgba(251,63,12,0); /* pulse keyframe endpoint */ /* Accent ramp — tints of the one orange, for ordered sets (format chips, data steps). Not a second accent: same hue, lighter steps. */ --accent-100: #FFE0D6; --accent-200: #FFC0A8; --accent-300: #FF9470; /* Secondary signals — Brand OS diagrams and data only, never chrome. */ --lime: #BBEE2F; --violet: #B09BEA; --pink: #F487DC; --sky: #5BBDE4; /* ── LINES, GLASS & SCRIMS ──────────────────────────────────────────────── On a dark canvas, edges are built from alpha light, not opaque grey. */ --hairline: rgba(255,255,255,.12); --hairline-strong: rgba(255,255,255,.25); --edge-lit: #FFFFFF; /* the glass card's full-strength 1px edge */ --glass: rgba(255,255,255,.06); --glass-lift: rgba(255,255,255,.15); --glass-lift-hi: rgba(255,255,255,.35); --scrim-soft: rgba(0,0,0,.15); --scrim: rgba(0,0,0,.55); --scrim-deep: rgba(0,0,0,.85); --blur-glass: blur(24px) saturate(180%); --blur-chrome: blur(14px); /* Fixed-chrome anchoring. Positional, deliberately off the 8-pt scale — page content that should line up with the nav references this. */ --chrome-inset: 45px; /* ── SPACING — 8-point scale ────────────────────────────────────────────── Every padding, margin and gap is one of these steps. The rule is simple and checkable: a spacing value must be a multiple of 8, with 4px and 12px as the two half-steps at the tight end where icons and chips live. Steps get further apart as they grow, the way the eye reads distance — 8px increments up close, 32px at section scale. If a layout seems to need something in between, pick a neighbour; don't invent a step. */ --space-1: 4px; /* icon-to-label, hairline offsets */ --space-2: 8px; --space-3: 12px; --space-4: 16px; /* padding inside compact controls */ --space-5: 24px; /* card padding, related-block gaps */ --space-6: 32px; --space-7: 40px; --space-8: 48px; /* section internal padding */ --space-9: 56px; --space-10: 64px; /* vertical rhythm between major blocks */ --space-11: 80px; --space-12: 96px; --space-13: 112px; --space-14: 128px; --space-15: 160px; --space-16: 192px; --space-17: 224px; /* full-bleed section breathing room */ /* ── TYPE ───────────────────────────────────────────────────────────────── Three families, each with one job: display — headlines, nav, labels, buttons (Greed Narrow) body — paragraphs, quotes, captions (Be Vietnam Pro) black — the brand's blackletter accent (UnifrakturCook) */ --font-display: 'Greed Narrow', sans-serif; --font-body: 'Be Vietnam Pro', sans-serif; --font-black: 'UnifrakturCook', serif; --text-4xs: 9px; /* micro labels — dense chips, mobile meta */ --text-3xs: 10px; --text-2xs: 11px; /* footer definition, dense mobile chrome */ --text-xs: 12px; /* labels, chips, meta */ --text-sm: 14px; /* nav, buttons, small body */ --text-base: 16px; /* body */ --text-lg: 18px; /* lead paragraphs */ --text-xl: 21px; /* subheads */ --text-2xl: 24px; /* section headings */ --text-3xl: 30px; /* large headings (display uses clamp() above this) */ /* Line-height tightens as size grows. */ --leading-display: 1.0; --leading-tight: 1.1; --leading-snug: 1.3; --leading-body: 1.55; /* Tracking moves opposite to size. */ --track-label: .08em; /* small uppercase opens up */ --track-normal: 0; --track-display: -.02em; /* large display closes up */ /* ── RADII — one family, applied by role ────────────────────────────────── Smaller elements take smaller radii so everything reads equally soft. */ --radius-sm: 8px; /* inputs, small controls, chips-with-corners */ --radius-md: 12px; /* cards, tiles, popovers */ --radius-lg: 16px; /* large cards, media blocks, modals */ --radius-xl: 24px; /* prominent panels */ --radius-pill: 999px; /* pills, tags, buttons, toggles */ --radius-circle: 50%; /* avatars and dots — true circles */ /* ── ELEVATION ──────────────────────────────────────────────────────────── Four steps, no more. Tinted toward the canvas floor (#050402), never pure black — warm shadow on a warm canvas. Blur carries the depth, not darkness. On dark surfaces, prefer a hairline over a shadow. */ --shadow-sm: 0 1px 2px rgba(5,4,2,.24); --shadow-md: 0 8px 24px rgba(5,4,2,.32); --shadow-lg: 0 20px 50px rgba(5,4,2,.44); --shadow-glow: 0 0 30px rgba(251,63,12,.30); /* one lit moment per view */ --inset-lift: inset 0 1px 0 rgba(255,255,255,.15); --inset-lift-hi: inset 0 1px 0 rgba(255,255,255,.35); --inset-hairline: inset 0 0 0 1px rgba(255,255,255,.08); /* Brand OS diagram glows — one recipe (0 0 22px @ .45), one per signal colour, so a lit node reads as the same object in five states. Diagrams only; chrome and marketing surfaces use --shadow-glow. */ --glow-ink: 0 0 22px rgba(255,255,255,.18); --glow-lime: 0 0 22px rgba(187,238,47,.45); --glow-sky: 0 0 22px rgba(91,189,228,.45); --glow-violet: 0 0 22px rgba(176,155,234,.45); --glow-pink: 0 0 22px rgba(244,135,220,.45); /* ── MOTION ─────────────────────────────────────────────────────────────── One signature curve. Two duration bands. Nothing bounces. */ --ease: cubic-bezier(.16, 1, .3, 1); --dur-fast: .2s; /* micro-feedback: colour, opacity */ --dur-ui: .4s; /* UI feedback: hover lift, panels, toggles */ --dur-entrance: .7s; /* reveals and section entrances */ --stagger: .1s; /* Marquees and other continuous loops keep `linear` — an eased loop stutters at the seam. That is the one deliberate exception to --ease. */ /* ── TEXTURE ────────────────────────────────────────────────────────────── Film grain overlay, used at low opacity over the soil gradient. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* ── LEGACY ALIASES ─────────────────────────────────────────────────────── Older names kept so existing rules keep resolving. Do not use in new work — reach for --accent / --canvas / --ink instead. */ --color-primary-500: var(--accent); --color-primary-400: var(--accent-hover); --bg: var(--canvas); --cream: var(--ink); --panel: var(--surface); --panel-2: var(--surface-2); --line: var(--hairline); } /* ── REDUCED MOTION ───────────────────────────────────────────────────────── Global baseline. Neutralises motion everywhere and reveals content instantly; individual pages may add their own specifics on top. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }