/* ============================================================= ROUNDHOUSE — Colors & Type The premium dark system. Obsidian / Bone / Brass / Dusty Red. ============================================================= */ /* Webfonts: Bebas Neue (display) + Barlow Condensed Wide-substitute for Montserrat Wide. Loaded from Google Fonts. */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@300;400;500;600;700&family=Barlow:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ---------- CORE PALETTE (source of truth) ---------- */ --rh-obsidian: #0D0D0F; /* foundation / primary bg */ --rh-bone: #E6E1D6; /* primary text / contrast / clarity*/ --rh-brass: #B89A56; /* structure / rings / dividers */ --rh-dusty-red: #C33A2E; /* action / urgency / signature */ /* ---------- EXTENDED NEUTRALS (derived) ---------- */ --rh-obsidian-900: #0A0A0C; /* deeper than base for layering */ --rh-obsidian-800: #111114; /* card/elevated surface 1 */ --rh-obsidian-700: #16161A; /* card/elevated surface 2 */ --rh-obsidian-600: #1D1D22; /* hover surface / pressed */ --rh-obsidian-500: #26262C; /* divider / inset */ --rh-obsidian-400: #36363D; /* heavy divider / track */ --rh-bone-100: #F2EEE5; /* near-white headline accent */ --rh-bone-300: #C8C3B7; /* secondary text */ --rh-bone-500: #8E897C; /* tertiary text / metadata */ --rh-bone-700: #5A564D; /* muted / placeholder */ --rh-brass-600: #9E8348; /* pressed / heavy brass */ --rh-brass-400: #C9AE6E; /* hover / lighter brass */ --rh-brass-200: #E1CB94; /* tint / hairline highlight */ --rh-brass-tint-08: rgba(184,154,86,0.08); --rh-brass-tint-16: rgba(184,154,86,0.16); --rh-brass-tint-32: rgba(184,154,86,0.32); --rh-red-700: #9F2D23; /* pressed dusty red */ --rh-red-400: #D85549; /* hover / lighter red */ --rh-red-tint-12: rgba(195,58,46,0.12); --rh-red-tint-24: rgba(195,58,46,0.24); /* Steel blue — added v3.2 as a fourth accent for data viz, suppressed- state indicators, and "cool / technical" moments. Used sparingly. */ --rh-steel: #6B8EA8; --rh-steel-400: #8FA9BD; --rh-steel-200: #B6C8D5; --rh-steel-tint-12: rgba(107,142,168,0.12); --rh-steel-tint-24: rgba(107,142,168,0.24); /* ---------- SEMANTIC: SURFACES ---------- */ --bg: var(--rh-obsidian); --bg-elevated-1: var(--rh-obsidian-800); --bg-elevated-2: var(--rh-obsidian-700); --bg-hover: var(--rh-obsidian-600); --bg-pressed: var(--rh-obsidian-500); --bg-inverse: var(--rh-bone); /* ---------- SEMANTIC: TEXT ---------- */ --fg-1: var(--rh-bone-100); /* headlines */ --fg-2: var(--rh-bone); /* body */ --fg-3: var(--rh-bone-300); /* secondary */ --fg-4: var(--rh-bone-500); /* metadata / captions */ --fg-muted: var(--rh-bone-700); --fg-on-brass: var(--rh-obsidian); --fg-on-red: var(--rh-bone-100); /* ---------- SEMANTIC: BORDERS / DIVIDERS ---------- */ --border-hairline: rgba(230,225,214,0.08); /* faint bone */ --border-default: rgba(230,225,214,0.14); --border-strong: rgba(230,225,214,0.24); --border-brass: var(--rh-brass); --border-brass-soft: var(--rh-brass-tint-32); /* ---------- SEMANTIC: ACTION / STATUS ---------- */ --accent: var(--rh-brass); /* structure accent */ --action: var(--rh-dusty-red); /* primary action */ --action-hover: var(--rh-red-400); --action-pressed: var(--rh-red-700); --status-ready: #6B8E5A; /* muted olive — "Ready" */ --status-due: var(--rh-brass); --status-attention: var(--rh-dusty-red); --status-low: #C77A3B; /* burnt brass — "Low Supply" */ --status-verified: #8AA37A; --status-complete: var(--rh-brass-400); /* ---------- SHADOWS / ELEVATION ---------- Dark systems use shadow sparingly; we lean on inset hairlines and brass strokes instead. */ --shadow-1: 0 1px 0 rgba(230,225,214,0.04) inset, 0 1px 2px rgba(0,0,0,0.5); --shadow-2: 0 1px 0 rgba(230,225,214,0.05) inset, 0 4px 14px rgba(0,0,0,0.55); --shadow-3: 0 1px 0 rgba(230,225,214,0.06) inset, 0 10px 32px rgba(0,0,0,0.65); --shadow-brass-glow: 0 0 0 1px var(--rh-brass-tint-32), 0 0 24px rgba(184,154,86,0.08); --shadow-red-glow: 0 0 0 1px var(--rh-red-tint-24), 0 0 24px rgba(195,58,46,0.18); /* ---------- RADII (small, mostly square) ---------- Roundhouse uses circles for rings/badges; UI surfaces are mostly square or barely-rounded. Avoid pillowy radii. */ --radius-0: 0px; --radius-1: 2px; /* hairline rounding on inputs/buttons */ --radius-2: 4px; /* default card */ --radius-3: 8px; /* large card / modal */ --radius-pill: 999px; /* badges / chips */ --radius-circle: 50%; /* rings, avatars */ /* ---------- SPACING (4 / 8 system) ---------- */ --s-0: 0px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* ---------- TYPE FAMILIES ---------- */ --font-display: 'Bebas Neue', 'Oswald', 'Impact', sans-serif; --font-ui: 'Barlow Condensed', 'Montserrat', 'Inter', system-ui, sans-serif; --font-body: 'Barlow', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* ---------- TYPE TOKENS (size · line-height · weight · tracking) ---------- */ /* Display — Bebas. Wide tracking, all-caps usage. */ --display-1-size: 96px; --display-1-lh: 0.92; --display-1-tr: 0.02em; --display-2-size: 72px; --display-2-lh: 0.94; --display-2-tr: 0.02em; --display-3-size: 56px; --display-3-lh: 0.96; --display-3-tr: 0.02em; /* Headlines — Bebas / Barlow Condensed. */ --h1-size: 40px; --h1-lh: 1.05; --h1-tr: 0.02em; --h2-size: 32px; --h2-lh: 1.10; --h2-tr: 0.02em; --h3-size: 24px; --h3-lh: 1.15; --h3-tr: 0.04em; --h4-size: 18px; --h4-lh: 1.25; --h4-tr: 0.06em; /* UI / Labels — Barlow Condensed Wide. */ --label-lg-size: 14px; --label-lg-lh: 1.15; --label-lg-tr: 0.14em; --label-md-size: 12px; --label-md-lh: 1.10; --label-md-tr: 0.16em; --label-sm-size: 10px; --label-sm-lh: 1.10; --label-sm-tr: 0.20em; /* Body — Barlow regular weight. */ --body-lg-size: 17px; --body-lg-lh: 1.5; --body-md-size: 15px; --body-md-lh: 1.5; --body-sm-size: 13px; --body-sm-lh: 1.45; /* Numeric / mono. */ --mono-md-size: 13px; --mono-md-lh: 1.3; --mono-sm-size: 11px; --mono-sm-lh: 1.2; } /* ============================================================= SEMANTIC HTML DEFAULTS ============================================================= */ html, body { background: var(--bg); color: var(--fg-2); font-family: var(--font-body); font-size: var(--body-md-size); line-height: var(--body-md-lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display headlines — caps, Bebas, wide tracking. */ .rh-display-1, .rh-display-2, .rh-display-3 { font-family: var(--font-display); color: var(--fg-1); text-transform: uppercase; font-weight: 400; margin: 0; } .rh-display-1 { font-size: var(--display-1-size); line-height: var(--display-1-lh); letter-spacing: var(--display-1-tr); } .rh-display-2 { font-size: var(--display-2-size); line-height: var(--display-2-lh); letter-spacing: var(--display-2-tr); } .rh-display-3 { font-size: var(--display-3-size); line-height: var(--display-3-lh); letter-spacing: var(--display-3-tr); } h1, .rh-h1 { font-family: var(--font-display); font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-tr); text-transform: uppercase; font-weight: 400; color: var(--fg-1); margin: 0; } h2, .rh-h2 { font-family: var(--font-display); font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-tr); text-transform: uppercase; font-weight: 400; color: var(--fg-1); margin: 0; } h3, .rh-h3 { font-family: var(--font-ui); font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-tr); text-transform: uppercase; font-weight: 600; color: var(--fg-1); margin: 0; } h4, .rh-h4 { font-family: var(--font-ui); font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-tr); text-transform: uppercase; font-weight: 600; color: var(--fg-2); margin: 0; } /* Labels — wide tracking caps, Barlow Condensed. The Roundhouse metadata voice. */ .rh-label-lg, .rh-label-md, .rh-label-sm { font-family: var(--font-ui); text-transform: uppercase; font-weight: 500; color: var(--fg-3); } .rh-label-lg { font-size: var(--label-lg-size); line-height: var(--label-lg-lh); letter-spacing: var(--label-lg-tr); } .rh-label-md { font-size: var(--label-md-size); line-height: var(--label-md-lh); letter-spacing: var(--label-md-tr); } .rh-label-sm { font-size: var(--label-sm-size); line-height: var(--label-sm-lh); letter-spacing: var(--label-sm-tr); } /* Body */ p, .rh-body-md { font-family: var(--font-body); font-size: var(--body-md-size); line-height: var(--body-md-lh); color: var(--fg-2); margin: 0; } .rh-body-lg { font-family: var(--font-body); font-size: var(--body-lg-size); line-height: var(--body-lg-lh); color: var(--fg-2); } .rh-body-sm { font-family: var(--font-body); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--fg-3); } /* Mono / numeric */ code, kbd, samp, .rh-mono { font-family: var(--font-mono); font-size: var(--mono-md-size); line-height: var(--mono-md-lh); color: var(--fg-2); } .rh-numeric { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; color: var(--fg-1); letter-spacing: 0.02em; } /* Links */ a { color: var(--rh-brass-400); text-decoration: none; border-bottom: 1px solid var(--rh-brass-tint-32); transition: color 120ms ease, border-color 120ms ease; } a:hover { color: var(--rh-brass-200); border-bottom-color: var(--rh-brass-400); } a:active { color: var(--rh-brass-600); } /* Selection */ ::selection { background: var(--rh-brass-tint-32); color: var(--fg-1); }