/* * permianforge.com design tokens v1 * * Phase 1.5a foundation. Defines CSS custom properties for the * approved Organic palette plus Inter and JetBrains Mono font * families. Sets html/body base styling so the page renders against * the warm off-white background with Inter as the default body font * the moment this file is linked from a page. * * No utility classes in this file yet. Existing pages keep their * inline styles until Session 2 begins the page-by-page refresh. * * Usage: add to the of any HTML page: * * * See design-system/README.md for the full design direction. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* Backgrounds */ --bg-primary: #FBFAF8; --bg-secondary: #F3F1EC; --bg-tertiary: #EDEAE3; --bg-elevated: #FFFFFF; /* Text */ --text-primary: #1C1C1E; --text-secondary: #4A4A4E; --text-muted: #8A8A8E; /* Borders */ --border-subtle: #D8D6D2; --border-defined: #BAB7B1; --border-wright: #8A8A8E; /* Brand and product accents */ --graphite: #2C2E33; --graphite-hover: #1C1C1E; --forge: #C89B4A; --haul: #A8371E; --guard: #1E5F3E; --ledger: #1E4A78; /* State colors */ --state-success: #1E5F3E; --state-success-soft: rgba(30, 95, 62, 0.1); --state-warning: #D97706; --state-warning-soft: rgba(217, 119, 6, 0.12); --state-danger: #B91C1C; --state-danger-soft: rgba(185, 28, 28, 0.1); --state-info: #1E4A78; --state-info-soft: rgba(30, 74, 120, 0.1); /* Link / info action color (denim blue, distinct from primary buttons). Use --accent-link on form focus rings, inline links, info-state UI. Primary buttons use --graphite (see Phase 1.5a Session 2 change 5). */ --accent-link: #1E4A78; --accent-link-hover: #163A60; /* Deprecated aliases. New work should use --accent-link / --accent-link-hover. Kept so existing rules that still reference --accent-primary keep working during the rollout. */ --accent-primary: var(--accent-link); --accent-primary-hover: var(--accent-link-hover); /* Typography */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.5; color: var(--text-primary); background: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* * Wordmark pattern. Two-color span structure documented in * design-system/README.md. Base class establishes typography; the * per-word modifier class assigns the two color tokens. */ .wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1; display: inline-block; } .wordmark-permianforge .wm-a { color: var(--graphite); } .wordmark-permianforge .wm-b { color: var(--forge); } .wordmark-ironhaul .wm-a { color: var(--graphite); } .wordmark-ironhaul .wm-b { color: var(--haul); } .wordmark-ironguard .wm-a { color: var(--graphite); } .wordmark-ironguard .wm-b { color: var(--guard); } .wordmark-ironledger .wm-a { color: var(--graphite); } .wordmark-ironledger .wm-b { color: var(--ledger); } /* * Inverse wordmark variant for dark-background contexts (footer in * dark mode, future hero overlays). Graphite half switches to the * warm off-white so both halves stay legible. */ .wordmark-on-dark.wordmark-permianforge .wm-a, .wordmark-on-dark.wordmark-ironhaul .wm-a, .wordmark-on-dark.wordmark-ironguard .wm-a, .wordmark-on-dark.wordmark-ironledger .wm-a { color: var(--bg-primary); }