/** * tokens.css — shared design tokens for the new app shell (app.php and * whatever pillar views follow it). * * Sep 2026 revision: replaced the earlier neutral/indigo placeholder * with the direction Brian approved in the "Petitti Ops Redesign * Flows" design canvas — a dark, precision-instrument enterprise look * (near-black surfaces, Space Grotesk for display type, IBM Plex Mono * for every number, a refined emerald for growth and a soft rose for * declines). This is a deliberate, approved departure from the app's * current green/gold branding — still doesn't touch any currently- * live page (today-live.php, fleet.php, etc. are untouched). * * This build is dark-only by design (matches the approved mockups, * which commit to one look rather than adapting to system light/dark) * — see the artifact-design guidance on when a single committed look * is the right call. If a light mode is ever wanted, add the same * three-state token structure used elsewhere in this app. */ :root { /* Surfaces */ --bg: #0a0c0f; --surface: #12151a; --surface-2: #171b21; --surface-3: #1c2129; --rule: #232830; --rule-soft: #1a1e24; --road: #262c35; /* Ink */ --ink: #f2f4f7; --ink-soft: #a7afbc; --ink-mute: #6b7280; --ink-on-accent: #04150d; /* Accents */ --accent: #2bd48a; --accent-soft: rgba(43, 212, 138, 0.14); --accent-2: #f2b134; --accent-2-soft: rgba(242, 177, 52, 0.14); --blue: #7aa7ff; --blue-soft: rgba(122, 167, 255, 0.14); --cyan: #4dd0e1; --cyan-soft: rgba(77, 208, 225, 0.14); /* Status */ --good: #2bd48a; --good-soft: rgba(43, 212, 138, 0.14); --warning: #f2b134; --warning-soft: rgba(242, 177, 52, 0.14); --critical: #f2554b; --critical-soft: rgba(242, 85, 75, 0.14); /* Shape & motion */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25); --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } /* ---- Light mode (Sep 2026) ---- Same token names, light values. Applied when the person picks Light in the account menu (data-theme="light" on ), or picks System and the device is in light mode. Dark stays the default everywhere else. */ :root { color-scheme: dark; --shimmer: rgba(255, 255, 255, 0.035); --accent-hover: #54e3a3; } :root[data-theme="light"] { color-scheme: light; --bg: #f5f6f8; --surface: #ffffff; --surface-2: #f3f5f8; --surface-3: #e9edf2; --rule: #dde2e8; --rule-soft: #e9edf1; --road: #d7dde4; --ink: #111418; --ink-soft: #4a5261; --ink-mute: #6b7382; --ink-on-accent: #ffffff; --accent: #0e9a5f; --accent-soft: rgba(14, 154, 95, 0.12); --accent-hover: #0b7d4d; --accent-2: #b7790b; --accent-2-soft: rgba(183, 121, 11, 0.12); --blue: #2563eb; --blue-soft: rgba(37, 99, 235, 0.10); --cyan: #0891b2; --cyan-soft: rgba(8, 145, 178, 0.10); --good: #0e9a5f; --good-soft: rgba(14, 154, 95, 0.12); --warning: #b45309; --warning-soft: rgba(180, 83, 9, 0.10); --critical: #dc2626; --critical-soft: rgba(220, 38, 38, 0.10); --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08); --shimmer: rgba(0, 0, 0, 0.045); } /* Baseline reset used by every page that loads this file. */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; margin: 0; } a { color: var(--accent); } a:hover { color: var(--accent-hover); } ::selection { background: var(--accent-soft); }