/* ========================================================================== flowmondo Design System · Tokens -------------------------------------------------------------------------- SOURCE OF TRUTH: flowmondo.com Pulled verbatim from https://cdn.prod.website-files.com/.../flowmondo.shared.a81898ce9.min.css Three layers, all using the site's exact names. 1. PRIMITIVES (--_primitives---*) Raw values. Brand, neutral, status ramps. Opacity scales. 91 tokens. 2. UI STYLES (--_ui-styles---*) Spacing, radius, stroke, z-index, fluid padding. 54 tokens. 3. COLOR SCHEME 1 (--color-scheme-1--*) Semantic aliases used by components. bg_primary, text_primary, border_primary, fg_brand_primary, etc. 70 tokens. Plus a small bridge layer at the bottom that maps the canonical names used inside style-guide.html to the site's tokens. The bridge is the ONLY place where this file restates a value. Do not edit primitives or ui-styles or color-scheme entries here. Pull again from the site CSS. ========================================================================== */ /* --- FONT FACE ----------------------------------------------------------- */ @font-face { font-family: "Tiltwarp Variablefont Xrot Yrot"; src: url("assets/fonts/TiltWarp-Variable.ttf") format("truetype-variations"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Variablefont Opsz Wght"; src: url("https://cdn.prod.website-files.com/6537a0bcbc21c5ee55762fc7/67fe5adac1061312afbc960e_Inter-VariableFont_opsz%2Cwght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/JetBrainsMono-Variable.ttf") format("truetype-variations"); font-weight: 100 800; font-style: normal; font-display: swap; } :root { /* ======================================================================== LAYER 1 · PRIMITIVES Raw values pulled verbatim from flowmondo.com. ====================================================================== */ --_primitives---color--brand--brand-25: #fff6f7; --_primitives---color--brand--brand-50: #fff1f3; --_primitives---color--brand--brand-100: #ffe4e8; --_primitives---color--brand--brand-200: #ffccd6; --_primitives---color--brand--brand-300: #fea3b4; --_primitives---color--brand--brand-400: #fd6f8d; --_primitives---color--brand--brand-500: #f74d75; --_primitives---color--brand--brand-600: #e31b54; --_primitives---color--brand--brand-700: #c01046; --_primitives---color--brand--brand-800: #a11041; --_primitives---color--brand--brand-900: #89123e; --_primitives---color--brand--brand-950: #4d041e; --_primitives---color--neutral--white: #fffffd; --_primitives---color--neutral--neutral-25: #fdfdfd; --_primitives---color--neutral--neutral-50: #fafafa; --_primitives---color--neutral--neutral-100: whitesmoke; --_primitives---color--neutral--neutral-200: #e9eaeb; --_primitives---color--neutral--neutral-300: #d5d7da; --_primitives---color--neutral--neutral-400: #a4a7ae; --_primitives---color--neutral--neutral-500: #717680; --_primitives---color--neutral--neutral-600: #535862; --_primitives---color--neutral--neutral-700: #414651; --_primitives---color--neutral--neutral-800: #252b37; --_primitives---color--neutral--neutral-900: #181d27; --_primitives---color--neutral--black: #0a0d12; /* Dark-mode addition (NOT from the site ramp): one recessed step between 900 and black. The site ramp has only 4 dark steps, too few for a distinct well < muted < canvas < card < raised ladder — so dark mode's "muted" surface (code, recessed panels, the outcome back-board) collapsed onto the card colour. This restores the missing tier. */ --_primitives---color--neutral--neutral-925: #14181f; --_primitives---color--success--success-25: #f6fef9; --_primitives---color--success--success-50: #ecfdf3; --_primitives---color--success--success-100: #dcfae6; --_primitives---color--success--success-200: #a9efc5; --_primitives---color--success--success-300: #75e0a7; --_primitives---color--success--success-400: #47cd89; --_primitives---color--success--success-500: #17b26a; --_primitives---color--success--success-600: #079455; --_primitives---color--success--success-700: #067647; --_primitives---color--success--success-800: #085d3a; --_primitives---color--success--success-900: #074d31; --_primitives---color--success--success-950: #053321; --_primitives---color--warning--warning-25: #fffcf5; --_primitives---color--warning--warning-50: #fffaeb; --_primitives---color--warning--warning-100: #fef0c7; --_primitives---color--warning--warning-200: #fedf89; --_primitives---color--warning--warning-300: #fec84b; --_primitives---color--warning--warning-400: #fdb022; --_primitives---color--warning--warning-500: #f79009; --_primitives---color--warning--warning-600: #dc6803; --_primitives---color--warning--warning-700: #b54708; --_primitives---color--warning--warning-800: #93370d; --_primitives---color--warning--warning-900: #7a2e0e; --_primitives---color--warning--warning-950: #4e1d09; --_primitives---color--error--error-25: #fffbfa; --_primitives---color--error--error-50: #fef3f2; --_primitives---color--error--error-100: #fee4e2; --_primitives---color--error--error-200: #fecdca; --_primitives---color--error--error-300: #fda29b; --_primitives---color--error--error-400: #f97066; --_primitives---color--error--error-500: #f04438; --_primitives---color--error--error-600: #d92d20; --_primitives---color--error--error-700: #b42318; --_primitives---color--error--error-800: #912018; --_primitives---color--error--error-900: #7a271a; --_primitives---color--error--error-950: #55160c; /* Info · first-class status hue (dark-mode work, 2026-05-29). The system previously faked "info" with raw blues; promoted to a full ramp parallel to success/warning/error so it themes consistently in both modes. Tailwind-blue scale (matches the existing #2563eb / #1e40af). */ --_primitives---color--info--info-25: #f5f9ff; --_primitives---color--info--info-50: #eff6ff; --_primitives---color--info--info-100: #dbeafe; --_primitives---color--info--info-200: #bfdbfe; --_primitives---color--info--info-300: #93c5fd; --_primitives---color--info--info-400: #60a5fa; --_primitives---color--info--info-500: #3b82f6; --_primitives---color--info--info-600: #2563eb; --_primitives---color--info--info-700: #1d4ed8; --_primitives---color--info--info-800: #1e40af; --_primitives---color--info--info-900: #1e3a8a; --_primitives---color--info--info-950: #172554; --_primitives---opacity--alpha-black-10: #0a0d121a; --_primitives---opacity--alpha-black-20: #0a0d1233; --_primitives---opacity--alpha-black-30: #0a0d124d; --_primitives---opacity--alpha-black-40: #0a0d1266; --_primitives---opacity--alpha-black-50: #0a0d1280; --_primitives---opacity--alpha-black-60: #0a0d1299; --_primitives---opacity--alpha-black-70: #0a0d12b3; --_primitives---opacity--alpha-black-80: #0a0d12cc; --_primitives---opacity--alpha-black-90: #0a0d12e6; --_primitives---opacity--alpha-black-100: var(--_primitives---color--neutral--black); --_primitives---opacity--alpha-white-10: #fffffd1a; --_primitives---opacity--alpha-white-20: #fffffd33; --_primitives---opacity--alpha-white-30: #fffffd4d; --_primitives---opacity--alpha-white-40: #fffffd66; --_primitives---opacity--alpha-white-50: #fffffd80; --_primitives---opacity--alpha-white-60: #fffffd99; --_primitives---opacity--alpha-white-70: #fffffdb3; --_primitives---opacity--alpha-white-80: #fffffdcc; --_primitives---opacity--alpha-white-90: #fffffde6; --_primitives---opacity--alpha-white-100: var(--_primitives---color--neutral--white); --_primitives---opacity--alpha-brand-10: #e31b541a; --_primitives---opacity--alpha-brand-20: #e31b5433; --_primitives---opacity--alpha-brand-30: #e31b544d; --_primitives---opacity--alpha-brand-40: #e31b5466; --_primitives---opacity--alpha-brand-50: #e31b5480; --_primitives---opacity--alpha-brand-60: #e31b5499; --_primitives---opacity--alpha-brand-70: #e31b54b3; --_primitives---opacity--alpha-brand-80: #e31b54cc; --_primitives---opacity--alpha-brand-90: #e31b54e6; --_primitives---opacity--alpha-brand-100: var(--_primitives---color--brand--brand-600); /* ======================================================================== LAYER 2 · UI STYLES Spacing, radius, stroke, z-index, fluid padding. ====================================================================== */ --_ui-styles---fluid-padding--small: 0px; --_ui-styles---fluid-padding--medium: 0px; --_ui-styles---fluid-padding--large: 0px; --_ui-styles---radius--none: 0rem; --_ui-styles---radius--xxs: .125rem; --_ui-styles---radius--xs: .25rem; --_ui-styles---radius--sm: .375rem; --_ui-styles---radius--m: .5rem; --_ui-styles---radius--l: .625rem; --_ui-styles---radius--xl: .75rem; --_ui-styles---radius--2xl: 1rem; --_ui-styles---radius--3xl: 1.25rem; --_ui-styles---radius--4xl: 1.5rem; --_ui-styles---radius--full: 99999rem; --_ui-styles---spacing--0: 0rem; --_ui-styles---spacing--0-5: .125rem; --_ui-styles---spacing--1: .25rem; --_ui-styles---spacing--1-5: .375rem; --_ui-styles---spacing--2: .5rem; --_ui-styles---spacing--3: .75rem; --_ui-styles---spacing--4: 1rem; --_ui-styles---spacing--5: 1.25rem; --_ui-styles---spacing--6: 1.5rem; --_ui-styles---spacing--8: 2rem; --_ui-styles---spacing--10: 2.5rem; --_ui-styles---spacing--12: 3rem; --_ui-styles---spacing--16: 4rem; --_ui-styles---spacing--20: 5rem; --_ui-styles---spacing--24: 6rem; --_ui-styles---spacing--32: 8rem; --_ui-styles---spacing--40: 10rem; --_ui-styles---spacing--48: 12rem; --_ui-styles---spacing--56: 14rem; --_ui-styles---spacing--64: 16rem; --_ui-styles---spacing--80: 20rem; --_ui-styles---spacing--96: 24rem; --_ui-styles---spacing--120: 30rem; --_ui-styles---spacing--140: 35rem; --_ui-styles---spacing--160: 40rem; --_ui-styles---spacing--180: 45rem; --_ui-styles---spacing--192: 48rem; --_ui-styles---spacing--256: 64rem; --_ui-styles---spacing--320: 80rem; --_ui-styles---spacing--360: 90rem; --_ui-styles---spacing--400: 100rem; --_ui-styles---spacing--480: 120rem; --_ui-styles---stroke--border-width: .125rem; --_ui-styles---stroke--divider-width: .125rem; --_ui-styles---z-index--negative: -1; --_ui-styles---z-index--zero: 0; --_ui-styles---z-index--low: 10; --_ui-styles---z-index--medium: 100; --_ui-styles---z-index--high: 1000; --_ui-styles---z-index--highest: 10000; /* ======================================================================== LAYER 3 · COLOR SCHEME 1 Semantic aliases. THIS IS THE LAYER COMPONENTS CONSUME. ====================================================================== */ /* Backgrounds */ --color-scheme-1--bg_primary: var(--_primitives---color--neutral--white); --color-scheme-1--bg_primary_alt: var(--_primitives---color--neutral--white); --color-scheme-1--bg_primary_hover: var(--_primitives---color--neutral--neutral-50); --color-scheme-1--bg_primary_solid: var(--_primitives---color--neutral--black); --color-scheme-1--bg_secondary: var(--_primitives---color--neutral--neutral-50); --color-scheme-1--bg_secondary_alt: var(--_primitives---color--neutral--neutral-50); --color-scheme-1--bg_secondary_hover: var(--_primitives---color--neutral--neutral-100); --color-scheme-1--bg_secondary_solid: var(--_primitives---color--neutral--neutral-600); --color-scheme-1--bg_tertiary: var(--_primitives---color--neutral--neutral-100); --color-scheme-1--bg_disabled: var(--_primitives---color--neutral--neutral-100); --color-scheme-1--bg_brand_primary: var(--_primitives---color--brand--brand-50); --color-scheme-1--bg_brand_secondary: var(--_primitives---color--brand--brand-100); --color-scheme-1--bg_brand_solid: var(--_primitives---color--brand--brand-600); --color-scheme-1--bg_brand_hover: var(--_primitives---color--brand--brand-700); --color-scheme-1--bg_success_primary: var(--_primitives---color--success--success-50); --color-scheme-1--bg_success_secondary: var(--_primitives---color--success--success-100); --color-scheme-1--bg_success_solid: var(--_primitives---color--success--success-600); --color-scheme-1--bg_warning_primary: var(--_primitives---color--warning--warning-50); --color-scheme-1--bg_warning_secondary: var(--_primitives---color--warning--warning-100); --color-scheme-1--bg_warning_solid: var(--_primitives---color--warning--warning-600); --color-scheme-1--bg_error_primary: var(--_primitives---color--error--error-50); --color-scheme-1--bg_error_secondary: var(--_primitives---color--error--error-100); --color-scheme-1--bg_error_solid: var(--_primitives---color--error--error-600); --color-scheme-1--bg_info_primary: var(--_primitives---color--info--info-50); --color-scheme-1--bg_info_secondary: var(--_primitives---color--info--info-100); --color-scheme-1--bg_info_solid: var(--_primitives---color--info--info-600); /* Borders */ --color-scheme-1--border_primary: var(--_primitives---color--neutral--neutral-300); --color-scheme-1--border_secondary: var(--_primitives---color--neutral--neutral-200); --color-scheme-1--border_tertiary: var(--_primitives---color--neutral--neutral-100); --color-scheme-1--border_disabled: var(--_primitives---color--neutral--neutral-300); --color-scheme-1--border_brand: var(--_primitives---color--brand--brand-500); --color-scheme-1--border_brand_alt: var(--_primitives---color--brand--brand-600); /* Foreground (icon / accent fills) */ --color-scheme-1--fg_primary: var(--_primitives---color--neutral--neutral-900); --color-scheme-1--fg_primary-hover: var(--_primitives---color--neutral--black); --color-scheme-1--fg_secondary: var(--_primitives---color--neutral--neutral-700); --color-scheme-1--fg_secondary-hover: var(--_primitives---color--neutral--neutral-800); --color-scheme-1--fg_tertiary: var(--_primitives---color--neutral--neutral-600); --color-scheme-1--fg_tertiary-hover: var(--_primitives---color--neutral--neutral-700); --color-scheme-1--fg_disabled: var(--_primitives---color--neutral--neutral-400); --color-scheme-1--fg_white: var(--_primitives---color--neutral--white); --color-scheme-1--fg_brand_primary: var(--_primitives---color--brand--brand-600); --color-scheme-1--fg_brand_primary-hover: var(--_primitives---color--brand--brand-700); --color-scheme-1--fg_brand_secondary: var(--_primitives---color--brand--brand-500); --color-scheme-1--fg_brand_secondary-hover: var(--_primitives---color--brand--brand-600); --color-scheme-1--fg_brand_tertiary: var(--_primitives---color--brand--brand-400); --color-scheme-1--fg_brand_tertiary-hover: var(--_primitives---color--brand--brand-500); --color-scheme-1--fg_success_primary: var(--_primitives---color--success--success-600); --color-scheme-1--fg_success_secondary: var(--_primitives---color--success--success-500); --color-scheme-1--fg_warning_primary: var(--_primitives---color--warning--warning-600); --color-scheme-1--fg_warning_secondary: var(--_primitives---color--warning--warning-500); --color-scheme-1--fg_error_primary: var(--_primitives---color--error--error-600); --color-scheme-1--fg_error_secondary: var(--_primitives---color--error--error-500); --color-scheme-1--fg_info_primary: var(--_primitives---color--info--info-600); --color-scheme-1--fg_info_secondary: var(--_primitives---color--info--info-500); /* Text */ --color-scheme-1--text_primary: var(--_primitives---color--neutral--neutral-900); --color-scheme-1--text-secondary: var(--_primitives---color--neutral--neutral-700); --color-scheme-1--text_tertiary: var(--_primitives---color--neutral--neutral-500); --color-scheme-1--text_disabled: var(--_primitives---color--neutral--neutral-500); --color-scheme-1--text_placeholder: var(--_primitives---color--neutral--neutral-300); --color-scheme-1--text_white: var(--_primitives---color--neutral--white); --color-scheme-1--text_primary_on-brand: var(--_primitives---color--neutral--white); --color-scheme-1--text_secondary_on-brand: var(--_primitives---color--brand--brand-200); --color-scheme-1--text_tertiary-on-brand: var(--_primitives---color--brand--brand-400); --color-scheme-1--text_primary_on-dark: var(--_primitives---color--neutral--white); --color-scheme-1--text_secondary_on-dark: var(--_primitives---color--neutral--neutral-200); --color-scheme-1--text_tertiary_on-dark: var(--_primitives---color--neutral--neutral-500); --color-scheme-1--text_brand_primary: var(--_primitives---color--brand--brand-600); --color-scheme-1--text_brand_secondary: var(--_primitives---color--brand--brand-800); --color-scheme-1--text_brand_tertiary: var(--_primitives---color--brand--brand-950); --color-scheme-1--text_success: var(--_primitives---color--success--success-600); --color-scheme-1--text_success_hover: var(--_primitives---color--success--success-700); --color-scheme-1--text_warning: var(--_primitives---color--warning--warning-600); --color-scheme-1--text_warning_hover: var(--_primitives---color--warning--warning-700); --color-scheme-1--text_error: var(--_primitives---color--error--error-600); --color-scheme-1--text_error_hover: var(--_primitives---color--error--error-700); --color-scheme-1--text_info: var(--_primitives---color--info--info-600); --color-scheme-1--text_info_hover: var(--_primitives---color--info--info-700); /* ======================================================================== BRIDGE LAYER Existing canonical style-guide.html references the names below. They are kept as aliases of the site tokens so the document continues to render correctly. Bridge entries are the ONLY place this file restates anything. Do not add new bridge entries. ====================================================================== */ /* surfaces */ --surface-canvas: var(--color-scheme-1--bg_primary); --surface-default: var(--color-scheme-1--bg_primary); --surface-elevated: var(--color-scheme-1--bg_primary); --surface-muted: var(--color-scheme-1--bg_tertiary); --surface-sunken: var(--color-scheme-1--bg_secondary); --surface-brand: var(--color-scheme-1--bg_brand_solid); --surface-brand-soft: var(--color-scheme-1--bg_brand_primary); --surface-dark: var(--color-scheme-1--bg_primary_solid); --surface-overlay: var(--_primitives---opacity--alpha-black-40); --surface-control: var(--_primitives---color--neutral--neutral-200); /* control tracks / input fields / avatars — needs a dark-visible value in dark mode */ /* text */ --text-primary: var(--color-scheme-1--text_primary); --text-body: var(--color-scheme-1--text_tertiary); --text-muted: var(--_primitives---color--neutral--neutral-400); --text-disabled: var(--color-scheme-1--text_disabled); --text-on-brand: var(--color-scheme-1--text_primary_on-brand); --text-on-brand-muted: var(--color-scheme-1--text_secondary_on-brand); --text-on-dark: var(--color-scheme-1--text_primary_on-dark); --text-on-dark-muted: var(--color-scheme-1--text_secondary_on-dark); --text-link: var(--color-scheme-1--text_brand_primary); --text-link-hover: var(--color-scheme-1--fg_brand_primary-hover); --text-brand: var(--color-scheme-1--text_brand_primary); --text-success: var(--color-scheme-1--text_success); --text-warning: var(--color-scheme-1--text_warning); --text-error: var(--color-scheme-1--text_error); --text-info: var(--color-scheme-1--text_info); --text-code: var(--color-scheme-1--text_brand_primary); /* borders */ --border-default: var(--color-scheme-1--border_primary); --border-subtle: var(--color-scheme-1--border_secondary); --border-strong: var(--_primitives---color--neutral--neutral-400); --border-brand: var(--color-scheme-1--border_brand_alt); --border-focus: var(--color-scheme-1--border_brand_alt); --shadow-focus: 0 0 0 3px var(--_primitives---opacity--alpha-brand-20); /* radii */ --radius-input: var(--_ui-styles---radius--m); --radius-chip: var(--_ui-styles---radius--l); --radius-card: var(--_ui-styles---radius--xl); --radius-card-inner: var(--_ui-styles---radius--2xl); --radius-feature: var(--_ui-styles---radius--4xl); --radius-pill: var(--_ui-styles---radius--full); /* shadows */ --shadow-subtle: 0 1px 3px var(--_primitives---opacity--alpha-black-10); --shadow-elevated: 0 12px 16px var(--_primitives---opacity--alpha-black-10), 0 4px 6px var(--_primitives---opacity--alpha-black-10); --shadow-icon-sheen: inset 1px 1px 0 var(--_primitives---opacity--alpha-white-80), 0 1px 3px var(--_primitives---opacity--alpha-black-10); /* spacing (8px deck scale, kept for legacy doc references) */ --space-component-tight: .5rem; /* 8px */ --space-component: 1rem; /* 16px */ --space-component-loose: 1.5rem; /* 24px */ --space-section-tight: 2rem; /* 32px */ --space-section: 3rem; /* 48px */ --space-section-loose: 4rem; /* 64px */ --space-canvas-margin: 5rem; /* 80px */ /* motion */ --duration-instant: 80ms; --duration-hover: 160ms; --duration-entry: 240ms; --duration-deliberate: 360ms; --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* atmosphere */ --glow-brand: radial-gradient(circle farthest-corner at 50% -25%, var(--_primitives---opacity--alpha-white-20) 7%, #fff0 70%); --glow-dark: radial-gradient(ellipse 80% 60% at 50% 0%, var(--_primitives---opacity--alpha-white-10), transparent 70%); /* z-index */ --z-base: var(--_ui-styles---z-index--zero); --z-elevated: var(--_ui-styles---z-index--low); --z-sticky: var(--_ui-styles---z-index--medium); --z-overlay: var(--_ui-styles---z-index--high); --z-modal: var(--_ui-styles---z-index--high); --z-toast: var(--_ui-styles---z-index--highest); /* fonts */ --font-display: "Tiltwarp Variablefont Xrot Yrot", "Tilt Warp", "Rubik", system-ui, sans-serif; --font-body: "Inter Variablefont Opsz Wght", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace; /* type scale (clamp values pulled from site .heading-style-* rules) */ --fs-display: clamp(2.5rem, 6vw + 1rem, 7rem); /* d1 */ --fs-display-sm: clamp(2rem, 5vw + 0.5rem, 4rem); /* d2 */ --fs-h1: clamp(2rem, 5vw + 1rem, 3rem); --fs-h2: clamp(1.8rem, 4vw + 0.5rem, 2.5rem); --fs-h3: clamp(1.5rem, 3vw + 0.5rem, 2rem); --fs-h4: clamp(1.25rem,2vw + 0.5rem, 1.75rem); --fs-h5: clamp(1.1rem, 1.5vw + 0.5rem, 1.5rem); --fs-h6: clamp(1rem, 1vw + 0.5rem, 1.25rem); --fs-body-lg: 1.25rem; --fs-body: 1.125rem; --fs-body-sm: 0.9375rem; --fs-label: 0.875rem; --fs-tag: 0.75rem; /* line heights (from site) */ --lh-display: 0.9; --lh-heading: 1; /* h1 */ --lh-h2: 1.05; --lh-h3: 1.1; --lh-h4: 1.15; --lh-h5: 1.15; --lh-h6: 1.2; --lh-ui: 1.25; --lh-body-lg: 1.50; --lh-body: 1.55; --lh-tight: 1.35; --lh-list: 1.60; /* tracking (from site) */ --tr-display: -0.03em; --tr-h1: -0.02em; --tr-h2: -0.015em; --tr-h3: -0.015em; --tr-h4: -0.02em; --tr-h5: -0.005em; --tr-h6: 0; --tr-label: 0.06em; /* ======================================================================== SHORT ALIASES Pre-v1 documents referenced these. Bridged here so they keep working. ====================================================================== */ --brand: var(--_primitives---color--brand--brand-600); --brand-50: var(--_primitives---color--brand--brand-50); --brand-100: var(--_primitives---color--brand--brand-100); --brand-200: var(--_primitives---color--brand--brand-200); --brand-700: var(--_primitives---color--brand--brand-700); --black: var(--_primitives---color--neutral--black); --white: var(--_primitives---color--neutral--white); --n50: var(--_primitives---color--neutral--neutral-50); --n100: var(--_primitives---color--neutral--neutral-100); --n200: var(--_primitives---color--neutral--neutral-200); --n300: var(--_primitives---color--neutral--neutral-300); --n400: var(--_primitives---color--neutral--neutral-400); --n500: var(--_primitives---color--neutral--neutral-500); --n600: var(--_primitives---color--neutral--neutral-600); --n700: var(--_primitives---color--neutral--neutral-700); --n900: var(--_primitives---color--neutral--neutral-900); --success: var(--_primitives---color--success--success-600); --warning: var(--_primitives---color--warning--warning-600); --error: var(--_primitives---color--error--error-600); --success-50:var(--_primitives---color--success--success-50); --warning-50:var(--_primitives---color--warning--warning-50); --error-50: var(--_primitives---color--error--error-50); --primitive-brand-50: var(--_primitives---color--brand--brand-50); --primitive-brand-100: var(--_primitives---color--brand--brand-100); --primitive-brand-200: var(--_primitives---color--brand--brand-200); --primitive-brand-300: var(--_primitives---color--brand--brand-300); --primitive-brand-400: var(--_primitives---color--brand--brand-400); --primitive-brand-500: var(--_primitives---color--brand--brand-500); --primitive-brand-600: var(--_primitives---color--brand--brand-600); --primitive-brand-700: var(--_primitives---color--brand--brand-700); --primitive-white: var(--_primitives---color--neutral--white); --primitive-n-50: var(--_primitives---color--neutral--neutral-50); --primitive-n-100: var(--_primitives---color--neutral--neutral-100); --primitive-n-200: var(--_primitives---color--neutral--neutral-200); --primitive-n-300: var(--_primitives---color--neutral--neutral-300); --primitive-n-400: var(--_primitives---color--neutral--neutral-400); --primitive-n-500: var(--_primitives---color--neutral--neutral-500); --primitive-n-600: var(--_primitives---color--neutral--neutral-600); --primitive-n-700: var(--_primitives---color--neutral--neutral-700); --primitive-n-800: var(--_primitives---color--neutral--neutral-800); --primitive-n-900: var(--_primitives---color--neutral--neutral-900); --primitive-black: var(--_primitives---color--neutral--black); --primitive-success-50: var(--_primitives---color--success--success-50); --primitive-success-200: var(--_primitives---color--success--success-200); --primitive-success-500: var(--_primitives---color--success--success-500); --primitive-success-600: var(--_primitives---color--success--success-600); --primitive-success-900: var(--_primitives---color--success--success-900); --primitive-warning-50: var(--_primitives---color--warning--warning-50); --primitive-warning-300: var(--_primitives---color--warning--warning-300); --primitive-warning-200: var(--_primitives---color--warning--warning-200); --primitive-warning-500: var(--_primitives---color--warning--warning-500); --primitive-warning-600: var(--_primitives---color--warning--warning-600); --primitive-error-50: var(--_primitives---color--error--error-50); --primitive-error-200: var(--_primitives---color--error--error-200); --primitive-error-500: var(--_primitives---color--error--error-500); --primitive-error-600: var(--_primitives---color--error--error-600); --primitive-error-900: var(--_primitives---color--error--error-900); --primitive-radius-sm: var(--_ui-styles---radius--sm); --primitive-radius-md: var(--_ui-styles---radius--m); --primitive-radius-lg: var(--_ui-styles---radius--l); --primitive-radius-xl: var(--_ui-styles---radius--xl); --primitive-radius-2xl: var(--_ui-styles---radius--2xl); --primitive-radius-3xl: var(--_ui-styles---radius--3xl); --primitive-radius-4xl: var(--_ui-styles---radius--4xl); --primitive-radius-full: var(--_ui-styles---radius--full); --primitive-font-display: var(--font-display); --primitive-font-body: var(--font-body); --primitive-font-mono: var(--font-mono); --primitive-fs-display: var(--fs-display); --primitive-fs-display-sm: var(--fs-display-sm); --primitive-fs-h1: var(--fs-h1); --primitive-fs-h2: var(--fs-h2); --primitive-fs-h3: var(--fs-h3); --primitive-fs-h4: var(--fs-h4); --primitive-fs-body-lg: var(--fs-body-lg); --primitive-fs-body: var(--fs-body); --primitive-fs-body-sm: var(--fs-body-sm); --primitive-fs-label: var(--fs-label); --primitive-fs-tag: var(--fs-tag); --primitive-fs-micro: 11px; --primitive-track-display: -0.03em; --primitive-track-h1: -0.02em; --primitive-track-h2: -0.015em; --primitive-track-h3: -0.015em; --primitive-track-h4: -0.02em; --primitive-track-label: 0.06em; --primitive-lh-display: var(--lh-display); --primitive-lh-heading: var(--lh-heading); --primitive-lh-ui: var(--lh-ui); --primitive-lh-body-lg: var(--lh-body-lg); --primitive-lh-body: var(--lh-body); --primitive-lh-tight: var(--lh-tight); --primitive-lh-list: var(--lh-list); --primitive-shadow-1: var(--shadow-subtle); --primitive-shadow-2: var(--shadow-elevated); --primitive-shadow-icon: var(--shadow-icon-sheen); --primitive-dur-1: 80ms; --primitive-dur-2: 120ms; --primitive-dur-3: 160ms; --primitive-dur-4: 240ms; --primitive-dur-5: 360ms; --primitive-ease-standard: var(--easing-standard); /* surface convenience */ --bg-canvas: var(--surface-canvas); --bg-surface: var(--surface-muted); --bg-card: var(--surface-default); --bg-brand: var(--surface-brand); --bg-dark: var(--surface-dark); --fg-1: var(--text-primary); --fg-2: var(--text-body); --fg-3: var(--text-muted); --fg-muted: var(--color-scheme-1--fg_tertiary); --fg-on-brand: var(--text-on-brand); --fg-on-brand-muted: var(--text-on-brand-muted); --fg-on-dark: var(--text-on-dark); --fg-on-dark-muted: var(--text-on-dark-muted); --border-soft: var(--border-subtle); --radius-sm: var(--_ui-styles---radius--sm); --radius-m: var(--_ui-styles---radius--m); --radius-l: var(--_ui-styles---radius--l); --radius-xl: var(--_ui-styles---radius--xl); --radius-2xl: var(--_ui-styles---radius--2xl); --radius-3xl: var(--_ui-styles---radius--3xl); --radius-4xl: var(--_ui-styles---radius--4xl); --radius-full:var(--_ui-styles---radius--full); --sp-1: 0.5rem; /* 8px */ --sp-2: 1rem; /* 16px */ --sp-3: 1.5rem; /* 24px */ --sp-4: 2rem; /* 32px */ --sp-6: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ --sp-10: 5rem; /* 80px */ --shadow-icon-inner: var(--shadow-icon-sheen); /* ======================================================================== CATEGORICAL PALETTE · identity / role / series coding The fourth colour job (after brand, neutral, semantic). Used to tell categories apart with NO good/bad meaning: the 8 solution roles, chart series, and category labels (e.g. changelog). Eight hues, each distinct from one another AND from the semantic ladder, so a category is never misread as a status. Scale: 50 bg · 200 border · 600 solid · 700 ink. ====================================================================== */ --cat-indigo-50:#eef2ff; --cat-indigo-200:#c7d2fe; --cat-indigo-600:#4f46e5; --cat-indigo-700:#3730a3; --cat-violet-50:#f5f3ff; --cat-violet-200:#ddd6fe; --cat-violet-600:#7c3aed; --cat-violet-700:#5b21b6; --cat-blue-50:#eff6ff; --cat-blue-200:#bfdbfe; --cat-blue-600:#2563eb; --cat-blue-700:#1e40af; --cat-teal-50:#f0fdfa; --cat-teal-200:#99f6e4; --cat-teal-600:#0d9488; --cat-teal-700:#115e59; --cat-cyan-50:#ecfeff; --cat-cyan-200:#a5f3fc; --cat-cyan-600:#0891b2; --cat-cyan-700:#155e75; --cat-bronze-50:#fbf3e6; --cat-bronze-200:#ecd6a8; --cat-bronze-600:#b07a2e; --cat-bronze-700:#835418; --cat-magenta-50:#fdf4ff; --cat-magenta-200:#f5d0fe; --cat-magenta-600:#c026d3; --cat-magenta-700:#86198f; --cat-slate-50:#f8fafc; --cat-slate-200:#e2e8f0; --cat-slate-600:#475569; --cat-slate-700:#334155; /* Chart / data-viz series — cycles the categorical palette in a fixed order */ --chart-1:var(--cat-indigo-600); --chart-2:var(--cat-violet-600); --chart-3:var(--cat-blue-600); --chart-4:var(--cat-teal-600); --chart-5:var(--cat-cyan-600); --chart-6:var(--cat-bronze-600); --chart-7:var(--cat-magenta-600); --chart-8:var(--cat-slate-600); /* Chart chrome — gridlines, axes, tracks, labels. Authored for a light ground; given mode-aware values so dark charts get SUBTLE gridlines (leading practice: chart chrome recedes, data ink leads) instead of harsh light strokes. Dark values set in LAYER 4. */ --chart-grid: var(--_primitives---color--neutral--neutral-200); /* primary gridlines / donut+gauge track */ --chart-grid-faint: var(--_primitives---color--neutral--neutral-100); /* secondary / minor gridlines */ --chart-label: var(--_primitives---color--neutral--neutral-500); /* axis + tick labels */ /* ======================================================================== PORTAL DOMAIN TOKENS · v1 Domain language for the customer portal. Three groups: - Solution roles (8) · alias the CATEGORICAL palette above - Stage ladder (8) · internal Request lifecycle (B5) - Product placeholder · single token, consumer overrides per instance ====================================================================== */ /* Solution roles · category colours (filled-chip use) — drawn from the categorical palette */ --role-sot: var(--cat-indigo-600); --role-orch: var(--cat-violet-600); --role-db: var(--cat-blue-600); --role-proc: var(--cat-teal-600); --role-gen: var(--cat-bronze-600); --role-notify: var(--cat-magenta-600); --role-ui: var(--cat-cyan-600); --role-log: var(--cat-slate-600); /* Solution roles · ink colours (darker text variant for low-emphasis use) */ --role-sot-ink: var(--cat-indigo-700); --role-orch-ink: var(--cat-violet-700); --role-db-ink: var(--cat-blue-700); --role-proc-ink: var(--cat-teal-700); --role-gen-ink: var(--cat-bronze-700); --role-notify-ink: var(--cat-magenta-700); --role-ui-ink: var(--cat-cyan-700); --role-log-ink: var(--cat-slate-700); /* Stage ladder · Request internal lifecycle (B5) Intake → Sizing → Scoping → Build → QA → Handover → Live → Held */ --stage-intake: var(--_primitives---color--neutral--neutral-300); --stage-sizing: var(--_primitives---color--neutral--neutral-500); --stage-scoping: var(--_primitives---color--neutral--neutral-700); --stage-build: var(--_primitives---color--brand--brand-500); --stage-qa: var(--_primitives---color--warning--warning-500); --stage-handover: var(--_primitives---color--success--success-400); --stage-live: var(--_primitives---color--success--success-600); --stage-held: var(--_primitives---color--error--error-400); /* Product placeholder · per-instance override expected. Real Product palette deferred until a real client portal lands. */ --product-current: var(--_primitives---color--brand--brand-500); } /* ========================================================================== LAYER 4 · DARK SCHEME -------------------------------------------------------------------------- Manual theme. Active wherever data-theme="dark" is set — on (whole page) OR on any container (a subtree, e.g. a side-by-side comparison pane). Absence of the attribute = light (the default). No prefers-color-scheme branch. Re-points ONLY the semantic (Layer 3) aliases and a small set of bridge tokens. NO primitive is redefined and NO raw value is introduced here — every declaration resolves to an existing primitive, which keeps dark mode inside the closed system (enforced by the build). Palette = re-map of the existing neutral ramp. Elevation comes from real surface steps (canvas 900 < surface 800 < raised 700), not pure inversion: canvas neutral-900 #181d27 surface neutral-800 #252b37 raised neutral-700 #414651 well black #0a0d12 Brand stays the one accent: text/icons lighten to brand-400/300; solid brand fills (buttons) keep brand-600 with white text. NB: the starting values below are a hypothesis proved/refined in the theming.html gallery (see docs/superpowers/specs/2026-05-28-dark-mode-design.md). ========================================================================== */ [data-theme="dark"] { /* Tell the browser to render native controls (unstyled inputs, scrollbars, the stepper field) in dark — otherwise they fall back to a white UA `field` colour. */ color-scheme: dark; /* --- Semantic · Backgrounds --------------------------------------------- */ --color-scheme-1--bg_primary: var(--_primitives---color--neutral--neutral-800); --color-scheme-1--bg_primary_alt: var(--_primitives---color--neutral--neutral-800); --color-scheme-1--bg_primary_hover: var(--_primitives---color--neutral--neutral-700); --color-scheme-1--bg_primary_solid: var(--_primitives---color--neutral--neutral-800); --color-scheme-1--bg_secondary: var(--_primitives---color--neutral--black); --color-scheme-1--bg_secondary_alt: var(--_primitives---color--neutral--black); --color-scheme-1--bg_secondary_hover: var(--_primitives---color--neutral--neutral-900); --color-scheme-1--bg_secondary_solid: var(--_primitives---color--neutral--neutral-400); --color-scheme-1--bg_tertiary: var(--_primitives---color--neutral--neutral-925); --color-scheme-1--bg_disabled: var(--_primitives---color--neutral--neutral-800); --color-scheme-1--bg_brand_primary: var(--_primitives---color--brand--brand-950); --color-scheme-1--bg_brand_secondary: var(--_primitives---color--brand--brand-900); --color-scheme-1--bg_brand_solid: var(--_primitives---color--brand--brand-600); --color-scheme-1--bg_brand_hover: var(--_primitives---color--brand--brand-500); --color-scheme-1--bg_success_primary: var(--_primitives---color--success--success-950); --color-scheme-1--bg_success_secondary: var(--_primitives---color--success--success-900); --color-scheme-1--bg_success_solid: var(--_primitives---color--success--success-600); --color-scheme-1--bg_warning_primary: var(--_primitives---color--warning--warning-950); --color-scheme-1--bg_warning_secondary: var(--_primitives---color--warning--warning-900); --color-scheme-1--bg_warning_solid: var(--_primitives---color--warning--warning-600); --color-scheme-1--bg_error_primary: var(--_primitives---color--error--error-950); --color-scheme-1--bg_error_secondary: var(--_primitives---color--error--error-900); --color-scheme-1--bg_error_solid: var(--_primitives---color--error--error-600); --color-scheme-1--bg_info_primary: var(--_primitives---color--info--info-950); --color-scheme-1--bg_info_secondary: var(--_primitives---color--info--info-900); --color-scheme-1--bg_info_solid: var(--_primitives---color--info--info-600); /* --- Semantic · Borders -------------------------------------------------- */ --color-scheme-1--border_primary: var(--_primitives---color--neutral--neutral-700); --color-scheme-1--border_secondary: var(--_primitives---color--neutral--neutral-800); --color-scheme-1--border_tertiary: var(--_primitives---color--neutral--neutral-800); --color-scheme-1--border_disabled: var(--_primitives---color--neutral--neutral-700); --color-scheme-1--border_brand: var(--_primitives---color--brand--brand-500); --color-scheme-1--border_brand_alt: var(--_primitives---color--brand--brand-500); /* --- Semantic · Foreground (icons / fills) ------------------------------- */ --color-scheme-1--fg_primary: var(--_primitives---color--neutral--neutral-25); --color-scheme-1--fg_primary-hover: var(--_primitives---color--neutral--white); --color-scheme-1--fg_secondary: var(--_primitives---color--neutral--neutral-300); --color-scheme-1--fg_secondary-hover: var(--_primitives---color--neutral--neutral-200); --color-scheme-1--fg_tertiary: var(--_primitives---color--neutral--neutral-300); --color-scheme-1--fg_tertiary-hover: var(--_primitives---color--neutral--neutral-300); --color-scheme-1--fg_disabled: var(--_primitives---color--neutral--neutral-600); --color-scheme-1--fg_white: var(--_primitives---color--neutral--white); --color-scheme-1--fg_brand_primary: var(--_primitives---color--brand--brand-400); --color-scheme-1--fg_brand_primary-hover: var(--_primitives---color--brand--brand-300); --color-scheme-1--fg_brand_secondary: var(--_primitives---color--brand--brand-400); --color-scheme-1--fg_brand_secondary-hover: var(--_primitives---color--brand--brand-300); --color-scheme-1--fg_brand_tertiary: var(--_primitives---color--brand--brand-300); --color-scheme-1--fg_brand_tertiary-hover: var(--_primitives---color--brand--brand-400); --color-scheme-1--fg_success_primary: var(--_primitives---color--success--success-400); --color-scheme-1--fg_success_secondary: var(--_primitives---color--success--success-300); --color-scheme-1--fg_warning_primary: var(--_primitives---color--warning--warning-400); --color-scheme-1--fg_warning_secondary: var(--_primitives---color--warning--warning-300); --color-scheme-1--fg_error_primary: var(--_primitives---color--error--error-400); --color-scheme-1--fg_error_secondary: var(--_primitives---color--error--error-300); --color-scheme-1--fg_info_primary: var(--_primitives---color--info--info-400); --color-scheme-1--fg_info_secondary: var(--_primitives---color--info--info-300); /* --- Semantic · Text ----------------------------------------------------- */ --color-scheme-1--text_primary: var(--_primitives---color--neutral--neutral-25); --color-scheme-1--text-secondary: var(--_primitives---color--neutral--neutral-200); --color-scheme-1--text_tertiary: var(--_primitives---color--neutral--neutral-300); --color-scheme-1--text_disabled: var(--_primitives---color--neutral--neutral-500); --color-scheme-1--text_placeholder: var(--_primitives---color--neutral--neutral-600); --color-scheme-1--text_white: var(--_primitives---color--neutral--white); --color-scheme-1--text_primary_on-brand: var(--_primitives---color--neutral--white); --color-scheme-1--text_secondary_on-brand: var(--_primitives---color--brand--brand-200); --color-scheme-1--text_tertiary-on-brand: var(--_primitives---color--brand--brand-300); --color-scheme-1--text_primary_on-dark: var(--_primitives---color--neutral--white); --color-scheme-1--text_secondary_on-dark: var(--_primitives---color--neutral--neutral-200); --color-scheme-1--text_tertiary_on-dark: var(--_primitives---color--neutral--neutral-400); --color-scheme-1--text_brand_primary: var(--_primitives---color--brand--brand-400); --color-scheme-1--text_brand_secondary: var(--_primitives---color--brand--brand-300); --color-scheme-1--text_brand_tertiary: var(--_primitives---color--brand--brand-200); --color-scheme-1--text_success: var(--_primitives---color--success--success-400); --color-scheme-1--text_success_hover: var(--_primitives---color--success--success-300); --color-scheme-1--text_warning: var(--_primitives---color--warning--warning-400); --color-scheme-1--text_warning_hover: var(--_primitives---color--warning--warning-300); --color-scheme-1--text_error: var(--_primitives---color--error--error-400); --color-scheme-1--text_error_hover: var(--_primitives---color--error--error-300); --color-scheme-1--text_info: var(--_primitives---color--info--info-400); --color-scheme-1--text_info_hover: var(--_primitives---color--info--info-300); /* --- Bridge surface overrides ------------------------------------------- */ /* Light mode collapses canvas / default / elevated onto bg_primary (white), distinguishing them only by shadow. Dark needs elevation-by-lightness, so these three are re-pointed directly rather than via the semantic layer. */ --surface-canvas: var(--_primitives---color--neutral--neutral-900); --surface-default: var(--_primitives---color--neutral--neutral-800); --surface-elevated: var(--_primitives---color--neutral--neutral-700); --surface-muted: var(--_primitives---color--neutral--neutral-925); --surface-sunken: var(--_primitives---color--neutral--black); --surface-dark: var(--_primitives---color--neutral--black); --surface-overlay: var(--_primitives---opacity--alpha-black-60); --surface-control: var(--_primitives---color--neutral--neutral-600); /* visible mid-grey track/field on dark cards (white thumb / light text read on it) */ /* --- Bridge tokens that point straight at a primitive (no cascade) ------- */ --text-muted: var(--_primitives---color--neutral--neutral-400); --border-strong: var(--_primitives---color--neutral--neutral-600); /* --- Bridge tokens that ALIAS the semantic layer ------------------------- */ /* CRITICAL for container theming. A bridge alias like `--text-primary: var(--…text_primary)` declared on :root resolves its var() AT :root (light) and inherits that frozen value into a [data-theme="dark"] CONTAINER — so it would NOT flip in a side-by-side pane (only on :root, where the dark block and the alias share one element). Re-declaring the aliases HERE forces them to re-resolve against the dark semantics for any subtree. Values come from the re-pointed semantic tokens above; identical to the :root definitions, so light mode is untouched. */ --text-primary: var(--color-scheme-1--text_primary); --text-secondary: var(--color-scheme-1--text-secondary); /* base aliases a fixed primitive (n-700); flip it */ --text-body: var(--color-scheme-1--text_tertiary); --text-disabled: var(--color-scheme-1--text_disabled); --text-on-brand: var(--color-scheme-1--text_primary_on-brand); --text-on-brand-muted: var(--color-scheme-1--text_secondary_on-brand); --text-on-dark: var(--color-scheme-1--text_primary_on-dark); --text-on-dark-muted: var(--color-scheme-1--text_secondary_on-dark); --text-link: var(--color-scheme-1--text_brand_primary); --text-link-hover: var(--color-scheme-1--fg_brand_primary-hover); --text-success: var(--color-scheme-1--text_success); --text-warning: var(--color-scheme-1--text_warning); --text-error: var(--color-scheme-1--text_error); --text-info: var(--color-scheme-1--text_info); --text-code: var(--color-scheme-1--text_brand_primary); --surface-brand: var(--color-scheme-1--bg_brand_solid); --surface-brand-soft: var(--color-scheme-1--bg_brand_primary); --border-default: var(--color-scheme-1--border_primary); --border-subtle: var(--color-scheme-1--border_secondary); --border-soft: var(--border-subtle); --border-brand: var(--color-scheme-1--border_brand_alt); --border-focus: var(--color-scheme-1--border_brand_alt); /* --- Chart chrome (dark) ------------------------------------------------- */ /* Subtle on the dark card (neutral-800): gridlines recede to a hair above the surface, labels lift to a readable mid-light. Data ink (brand / semantic series) is unchanged. */ --chart-grid: var(--_primitives---color--neutral--neutral-700); --chart-grid-faint: var(--_primitives---color--neutral--neutral-700); /* also the donut/gauge track — must stay visible on the card (neutral-800), so not neutral-800 */ --chart-label: var(--_primitives---color--neutral--neutral-400); } /* ========================================================================== SEMANTIC ELEMENT STYLES ========================================================================== */ body { font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-primary); background: var(--surface-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .display, .display-sm { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); text-wrap: balance; margin: 0; } h1 { font-size: var(--fs-h1); letter-spacing: var(--tr-h1); line-height: var(--lh-heading); } h2 { font-size: var(--fs-h2); letter-spacing: var(--tr-h2); line-height: var(--lh-h2); } h3 { font-size: var(--fs-h3); letter-spacing: var(--tr-h3); line-height: var(--lh-h3); } h4 { font-size: var(--fs-h4); letter-spacing: var(--tr-h4); line-height: var(--lh-h4); } h5 { font-size: var(--fs-h5); letter-spacing: var(--tr-h5); line-height: var(--lh-h5); } h6 { font-size: var(--fs-h6); letter-spacing: var(--tr-h6); line-height: var(--lh-h6); } .display { font-size: var(--fs-display); letter-spacing: var(--tr-display); line-height: var(--lh-display); } .display-sm { font-size: var(--fs-display-sm); letter-spacing: -0.025em; line-height: 1; } p, .body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 0; } .body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); } .body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); } .body-tight { line-height: var(--lh-tight); } strong, b, .emph { font-weight: 600; color: var(--text-primary); } .label { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500; color: var(--text-body); } .label-upper { text-transform: uppercase; letter-spacing: var(--tr-label); font-size: 0.6875rem; } .tag-text { font-family: var(--font-body); font-size: var(--fs-tag); font-weight: 500; } code, kbd, samp, .mono { font-family: var(--font-mono); font-feature-settings: "calt" 0; font-size: 0.95em; background: transparent; /* Option D · outline chip */ box-shadow: inset 0 0 0 1px var(--border-default); /* keyline reads in both themes */ padding: 2px 6px; border-radius: 4px; color: var(--text-code); } a { color: var(--text-link); text-decoration: none; transition: color var(--duration-hover) var(--easing-standard); } a:hover { color: var(--text-link-hover); } /* ========================================================================== SIGNATURE LONG-FORM PATTERNS ========================================================================== */ blockquote.primary { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--text-primary); line-height: var(--lh-tight); letter-spacing: -0.005em; border-left: 3px solid var(--border-brand); padding: 4px 20px; margin: 0; max-width: 620px; } blockquote.primary cite { display: block; margin-top: 10px; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; font-style: normal; color: var(--text-body); line-height: 1.5; } blockquote.primary cite strong { color: var(--text-primary); font-weight: 600; } blockquote.pull { font-family: var(--font-body); font-size: 0.9375rem; color: var(--_primitives---color--neutral--neutral-700); line-height: var(--lh-list); background: var(--surface-brand-soft); border-radius: 0 8px 8px 0; border-left: 3px solid var(--border-brand); padding: 12px 18px; margin: 0; max-width: 620px; } ul.fm-list, ol.fm-list { font-family: var(--font-body); font-size: 1rem; color: var(--color-scheme-1--fg_tertiary); line-height: var(--lh-list); margin: 0; padding: 0; list-style: none; max-width: 620px; } ul.fm-list li, ol.fm-list li { position: relative; padding: 4px 0 4px 28px; } ul.fm-list li::before { content: ""; position: absolute; left: 8px; top: 14px; width: 6px; height: 6px; background: var(--_primitives---color--brand--brand-600); border-radius: var(--radius-pill); } ol.fm-list { counter-reset: li; } ol.fm-list li { counter-increment: li; } ol.fm-list li::before { content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: 4px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--_primitives---color--brand--brand-600); font-weight: 500; width: 22px; text-align: right; } ul.fm-list li strong, ol.fm-list li strong { color: var(--text-primary); font-weight: 600; } ul.fm-list ul, ol.fm-list ul { margin: 4px 0 2px 0; padding: 0; list-style: none; font-size: 0.875rem; } ul.fm-list ul li::before { top: 12px; width: 5px; height: 1px; background: var(--_primitives---color--neutral--neutral-400); border-radius: 0; } .fn-body sup a { font-family: var(--font-mono); font-size: 0.625rem; color: var(--_primitives---color--brand--brand-600); text-decoration: none; padding: 0 3px; border-radius: 3px; background: var(--_primitives---color--brand--brand-50); vertical-align: super; line-height: 0; } .fn-divider { width: 36px; border: none; border-top: 1px solid var(--border-default); margin: 10px 0 8px; } .fn-list { list-style: none; margin: 0; padding: 0; font-family: var(--font-body); font-size: 0.75rem; color: var(--text-body); line-height: 1.55; max-width: 620px; } .fn-list li { padding: 3px 0 3px 26px; position: relative; } .fn-list li .num { position: absolute; left: 0; top: 4px; font-family: var(--font-mono); font-size: 0.625rem; color: var(--_primitives---color--brand--brand-600); }