/* ============================================================ B&C MONTAGEN — DESIGN TOKENS Vendored verbatim from the B&C Montagen design system (tokens/{colors,typography,spacing,elevation}.css). Do not invent values — extend via tokens only. Fonts are self-hosted (see base.css), replacing the design system's web-font import. ============================================================ */ /* ------------------------------------------------------------ COLOR TOKENS Dark-first, premium-technical. Graphite/anthracite backbone, metallic silver text, restrained warm orange (heating) accent, and a sparingly-used cold cyan (cooling) accent. ------------------------------------------------------------ */ :root { /* ---------- BASE PALETTE ---------- */ /* Graphite / anthracite neutral scale (near-black → white) */ --gray-990: #0C0D0E; /* deepest scrim black */ --gray-950: #111315; /* sunken surface */ --gray-900: #16181A; /* page base (default dark canvas) */ --gray-850: #1B1E21; /* raised surface */ --gray-800: #212529; /* card / anthracite */ --gray-750: #262B30; /* hover surface on dark */ --gray-700: #2C3137; /* graphite elevated / popover */ --gray-600: #3A4046; /* steel border on dark */ --gray-500: #565D64; /* disabled text / heavy muted */ --gray-400: #767D85; /* tertiary text on dark */ --gray-300: #9BA1A8; /* secondary muted */ --gray-250: #AEB4BA; /* secondary text on dark */ --gray-200: #C2C7CC; /* metallic silver (logo wordmark) */ --gray-150: #DCDEE1; /* hairline on light */ --gray-100: #ECEDED; /* light surface alt */ --gray-75: #F0EFEC; /* light sunken (warm) */ --gray-50: #F4F3F1; /* light relief surface (warm concrete) */ --white: #FFFFFF; /* Brand orange — HEATING accent (the single primary action color) */ --orange-300: #F6A877; /* glow highlight / on-dark tint text */ --orange-400: #F2792F; /* hover */ --orange-500: #E0531F; /* PRIMARY brand orange */ --orange-600: #C2410C; /* pressed / active */ --orange-700: #9A3412; /* deep */ /* Cold cyan — COOLING accent (use very sparingly) */ --cool-300: #7FBCD6; --cool-400: #5AA7C7; --cool-500: #3F8FB0; /* cooling accent */ --cool-600: #2E6F8C; /* Raw status hues */ --green-500: #34A56C; --amber-500: #E2A33C; --red-500: #D23A28; /* ---------- SEMANTIC: SURFACES (dark-first) ---------- */ --surface-sunken: var(--gray-950); --surface-base: var(--gray-900); /* default page background */ --surface-raised: var(--gray-850); --surface-card: var(--gray-800); --surface-card-hover: var(--gray-750); --surface-overlay: var(--gray-700); /* popovers, menus, tooltips */ --surface-inset: var(--gray-990); /* image wells, code */ /* Light relief surfaces (text-heavy / "Warum B&C", specs) */ --surface-light-sunken: var(--gray-75); --surface-light: var(--gray-50); --surface-light-raised: var(--white); /* Brand tone */ --brand-graphite: #1E2125; /* logo background graphite */ /* ---------- SEMANTIC: TEXT ---------- */ /* on dark surfaces */ --text-primary: #F3F4F4; --text-secondary: var(--gray-250); --text-tertiary: var(--gray-400); --text-disabled: var(--gray-500); /* on light surfaces */ --text-on-light: #16181A; --text-on-light-secondary: #4F555B; --text-on-light-tertiary: #767D85; /* inverse / accent */ --text-accent: var(--orange-500); --text-on-accent: var(--white); --text-on-cool: var(--white); /* ---------- SEMANTIC: BORDERS ---------- */ --border-subtle: #23282D; /* faint divider on dark */ --border-default: #313840; /* default border on dark */ --border-strong: #454C54; /* emphasized / steel */ --border-on-light: #E3E1DD; --border-on-light-strong:#CDCBC5; /* ---------- SEMANTIC: ACCENT ROLES ---------- */ --accent: var(--orange-500); --accent-hover: var(--orange-400); --accent-active: var(--orange-600); --accent-subtle: rgba(224, 83, 31, 0.12); /* tint fill */ --accent-subtle-hover: rgba(224, 83, 31, 0.18); --accent-border: rgba(224, 83, 31, 0.45); --accent-cool: var(--cool-500); --accent-cool-subtle: rgba(63, 143, 176, 0.12); --accent-cool-border: rgba(63, 143, 176, 0.42); /* ---------- SEMANTIC: STATUS ---------- */ --success: var(--green-500); --success-subtle: rgba(52, 165, 108, 0.14); --warning: var(--amber-500); --warning-subtle: rgba(226, 163, 60, 0.14); --danger: var(--red-500); --danger-subtle: rgba(210, 58, 40, 0.14); --info: var(--cool-500); --info-subtle: var(--accent-cool-subtle); /* ---------- FOCUS ---------- */ --focus-ring: var(--orange-500); /* ---------- SCRIMS & GRADIENTS (image text-protection) ---------- */ --scrim-bottom: linear-gradient(to top, rgba(12,13,14,0.94) 0%, rgba(12,13,14,0.55) 38%, rgba(12,13,14,0) 100%); --scrim-bottom-soft: linear-gradient(to top, rgba(12,13,14,0.85) 0%, rgba(12,13,14,0) 70%); --scrim-left: linear-gradient(to right, rgba(12,13,14,0.92) 0%, rgba(12,13,14,0.45) 45%, rgba(12,13,14,0) 100%); --scrim-full: linear-gradient(180deg, rgba(12,13,14,0.45) 0%, rgba(12,13,14,0.72) 100%); /* Signature "heat line" — the warm orange glow rule */ --heat-line: linear-gradient(90deg, rgba(224,83,31,0) 0%, var(--orange-400) 28%, var(--orange-300) 50%, var(--orange-400) 72%, rgba(224,83,31,0) 100%); --heat-glow-color: rgba(242, 121, 47, 0.5); } /* ------------------------------------------------------------ TYPOGRAPHY TOKENS Archivo (grotesque) for display + body. IBM Plex Mono for technical eyebrows, labels, and spec values. The mono/uppercase tracked label is the brand's "machined precision" voice. ------------------------------------------------------------ */ :root { /* ---------- FAMILIES ---------- */ --font-sans: 'Archivo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display: var(--font-sans); --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* ---------- WEIGHTS ---------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ---------- SIZES ---------- */ --fs-3xs: 0.6875rem; /* 11px */ --fs-2xs: 0.75rem; /* 12px */ --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.875rem; /* 14px */ --fs-md: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.25rem; /* 20px */ --fs-2xl: 1.5rem; /* 24px */ --fs-3xl: 2rem; /* 32px */ --fs-4xl: 2.75rem; /* 44px */ --fs-5xl: 3.5rem; /* 56px */ --fs-6xl: 4.5rem; /* 72px */ /* ---------- LINE HEIGHTS ---------- */ --lh-none: 1; --lh-tight: 1.08; --lh-snug: 1.22; --lh-normal: 1.45; --lh-relaxed: 1.62; /* ---------- LETTER SPACING ---------- */ --ls-tighter: -0.02em; --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; --ls-wider: 0.1em; --ls-eyebrow: 0.18em; /* ============================================================ SEMANTIC ROLE TOKENS (shorthand: weight size/lh family) Use these directly: font: var(--type-display-xl); ============================================================ */ /* Display — Archivo bold, hero + section heads */ --type-display-2xl: var(--fw-bold) var(--fs-6xl)/var(--lh-tight) var(--font-display); --type-display-xl: var(--fw-bold) var(--fs-5xl)/var(--lh-tight) var(--font-display); --type-display-lg: var(--fw-bold) var(--fs-4xl)/1.1 var(--font-display); --type-display-md: var(--fw-bold) var(--fs-3xl)/var(--lh-snug) var(--font-display); --type-display-sm: var(--fw-semibold) var(--fs-2xl)/var(--lh-snug) var(--font-display); /* Title — section sub-heads, card titles */ --type-title-lg: var(--fw-semibold) var(--fs-xl)/1.3 var(--font-display); --type-title-md: var(--fw-semibold) var(--fs-lg)/1.4 var(--font-display); --type-title-sm: var(--fw-semibold) var(--fs-md)/1.45 var(--font-display); /* Body — Archivo regular */ --type-body-lg: var(--fw-regular) var(--fs-lg)/var(--lh-relaxed) var(--font-sans); --type-body-md: var(--fw-regular) var(--fs-md)/var(--lh-relaxed) var(--font-sans); --type-body-sm: var(--fw-regular) var(--fs-sm)/var(--lh-normal) var(--font-sans); --type-caption: var(--fw-regular) var(--fs-2xs)/var(--lh-normal) var(--font-sans); /* Mono — technical eyebrows, spec values, tags, part codes */ --type-mono-md: var(--fw-medium) var(--fs-sm)/var(--lh-normal) var(--font-mono); --type-mono-sm: var(--fw-medium) var(--fs-xs)/var(--lh-normal) var(--font-mono); --type-eyebrow: var(--fw-medium) var(--fs-2xs)/1.3 var(--font-mono); /* + uppercase + ls-eyebrow */ --type-button: var(--fw-semibold) var(--fs-sm)/1 var(--font-sans); /* + ls-wide */ } /* ------------------------------------------------------------ SPACING & LAYOUT TOKENS 8px base grid. Generous, disciplined section rhythm. ------------------------------------------------------------ */ :root { /* ---------- SPACING SCALE (8px base) ---------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 5rem; /* 80 */ --space-10: 6rem; /* 96 */ --space-11: 7.5rem; /* 120 */ --space-12: 10rem; /* 160 */ /* ---------- SEMANTIC SPACING ---------- */ --space-section: var(--space-10); /* 96px — major editorial band */ --space-section-lg: var(--space-11); /* 120px — hero / feature band */ --space-card: var(--space-5); /* 24px — card interior */ --space-card-lg: var(--space-6); /* 32px — feature card interior */ --space-stack: var(--space-4); /* default vertical gap */ --space-inline: var(--space-3); /* default inline gap */ /* ---------- LAYOUT ---------- */ --container-max: 1280px; /* default content container */ --container-wide: 1440px; /* wide editorial container */ --container-narrow: 760px; /* prose measure */ --gutter: 1.5rem; /* page side gutter (mobile) */ --gutter-lg: 2.5rem; /* page side gutter (desktop) */ /* ---------- GRID ---------- */ --grid-columns: 12; --grid-gap: var(--space-5); /* ---------- BORDER WIDTHS ---------- */ --border-width-hair: 1px; --border-width: 1px; --border-width-thick: 2px; /* ---------- SIZING ---------- */ --control-height-sm: 36px; --control-height-md: 44px; /* default — meets 44px touch target */ --control-height-lg: 52px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; } /* ------------------------------------------------------------ RADIUS, ELEVATION & MOTION TOKENS Precise, engineered: near-square corners, restrained shadows, depth from borders + surface steps + photography. No bounce. ------------------------------------------------------------ */ :root { /* ---------- BORDER RADIUS ---------- Binary system: near-square for everything (technical, machined), full only for circular elements (avatars, icon buttons, dots). */ --radius-none: 0; --radius-xs: 2px; /* default — buttons, inputs, tags */ --radius-sm: 3px; /* cards, tiles */ --radius-md: 4px; /* media wells, large cards */ --radius-lg: 6px; /* dialogs, sheets */ --radius-pill: 999px; --radius-full: 9999px; /* ---------- ELEVATION (shadows) ---------- Tuned for dark surfaces — subtle, never soft/floaty. Depth mostly comes from borders + surface contrast + photos. */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55); --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.6); /* On light relief surfaces */ --shadow-light-sm: 0 1px 2px rgba(22, 24, 26, 0.08); --shadow-light-md: 0 8px 28px rgba(22, 24, 26, 0.10); /* Signature heat glow — sparingly, for active/heated states */ --shadow-glow: 0 0 28px var(--heat-glow-color); --shadow-glow-sm: 0 0 14px rgba(242, 121, 47, 0.4); /* Focus ring (offset, on dark) */ --ring-focus: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--accent); --ring-focus-flat: 0 0 0 2px var(--accent); /* ---------- MOTION ---------- Precise and restrained. Short fades, small translate / underline reveals. Premium decel curve. Never bounce or overshoot. */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-instant: 80ms; --duration-fast: 130ms; --duration-base: 220ms; --duration-slow: 360ms; --duration-slower: 600ms; --transition-colors: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }