/* BinCast — design tokens * * Forge tokens are scoped via data-forge attribute: * — tool pages *
— hub hearth sections * * Every component uses var(--forge-primary) / var(--forge-accent). * The :root block sets brand defaults (forge/ember) as fallback. */ :root { /* Base palette — forge soot and warm iron */ --bg: #0b0d0a; --surface: #111410; --surface2: #171b14; --border: #1f2620; --text: #e6ede7; --muted: #69786b; --secondary: #8a9e8d; --radius: 6px; --radius-lg: 10px; --header-h: 68px; --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace; --font-disp: 'Fraunces', Georgia, serif; /* Brand — forge fire and hot metal (hub hero, shared chrome) */ --brand-primary: #e8622a; --brand-accent: #c49040; --brand-a10: rgba(232, 98, 42, 0.10); --brand-a20: rgba(232, 98, 42, 0.20); /* Forge token defaults — inherit brand until a data-forge scope overrides */ --forge-primary: #e8622a; --forge-accent: #c49040; --forge-a8: rgba(232, 98, 42, 0.08); --forge-a15: rgba(232, 98, 42, 0.15); --forge-border: rgba(232, 98, 42, 0.18); --forge-glow: radial-gradient(ellipse 55% 50% at 50% 48%, rgba(232, 98, 42, 0.07) 0%, transparent 70%); --forge-bar: linear-gradient(90deg, #e8622a, #c49040); } /* ── Bellows — Network (Navigator's Chart Room) ─────────────────── */ [data-forge="network"] { --forge-primary: #7a9e8a; --forge-accent: #c4933f; --forge-a8: rgba(122, 158, 138, 0.08); --forge-a15: rgba(122, 158, 138, 0.15); --forge-border: rgba(122, 158, 138, 0.18); --forge-glow: radial-gradient(ellipse 55% 50% at 50% 48%, rgba(122, 158, 138, 0.07) 0%, transparent 70%); --forge-bar: linear-gradient(90deg, #7a9e8a, #c4933f); } /* ── Vault — Crypto (The Apothecary) ────────────────────────────── */ [data-forge="crypto"] { --forge-primary: #c49a40; --forge-accent: #7a9e6a; --forge-a8: rgba(196, 154, 64, 0.08); --forge-a15: rgba(196, 154, 64, 0.15); --forge-border: rgba(196, 154, 64, 0.18); --forge-glow: radial-gradient(ellipse 55% 50% at 50% 48%, rgba(196, 154, 64, 0.07) 0%, transparent 70%); --forge-bar: linear-gradient(90deg, #c49a40, #7a9e6a); } /* ── Crucible — Data (The Alchemist's Still) ────────────────────── */ [data-forge="data"] { --forge-primary: #c4622d; --forge-accent: #a3a832; --forge-a8: rgba(196, 98, 45, 0.08); --forge-a15: rgba(196, 98, 45, 0.15); --forge-border: rgba(196, 98, 45, 0.18); --forge-glow: radial-gradient(ellipse 55% 50% at 50% 48%, rgba(196, 98, 45, 0.07) 0%, transparent 70%); --forge-bar: linear-gradient(90deg, #c4622d, #a3a832); } /* ── Anvil — Text (The Compositor's Shop) ───────────────────────── */ [data-forge="text"] { --forge-primary: #8a8fa3; --forge-accent: #b83232; --forge-a8: rgba(138, 143, 163, 0.08); --forge-a15: rgba(138, 143, 163, 0.15); --forge-border: rgba(138, 143, 163, 0.18); --forge-glow: radial-gradient(ellipse 55% 50% at 50% 48%, rgba(138, 143, 163, 0.05) 0%, transparent 70%); --forge-bar: linear-gradient(90deg, #8a8fa3, #b83232); } /* ── Hearth — Code (The Glassblower's Studio) ───────────────────── */ [data-forge="code"] { --forge-primary: #3d6fa8; --forge-accent: #e8973a; --forge-a8: rgba(61, 111, 168, 0.08); --forge-a15: rgba(61, 111, 168, 0.15); --forge-border: rgba(61, 111, 168, 0.18); --forge-glow: radial-gradient(ellipse 55% 50% at 50% 48%, rgba(61, 111, 168, 0.07) 0%, transparent 70%); --forge-bar: linear-gradient(90deg, #3d6fa8, #e8973a); } /* ── Specialty ───────────────────────────────────────────────────── */ [data-forge="specialty"] { --forge-primary: #8ca0b8; --forge-accent: #a8c0d8; --forge-a8: rgba(140, 160, 184, 0.08); --forge-a15: rgba(140, 160, 184, 0.15); --forge-border: rgba(140, 160, 184, 0.18); --forge-glow: radial-gradient(ellipse 55% 50% at 50% 48%, rgba(140, 160, 184, 0.05) 0%, transparent 70%); --forge-bar: linear-gradient(90deg, #8ca0b8, #a8c0d8); }