/* * tokens.css — Hypatia Brain Design System * Single source of truth for all visual tokens. * Import in every page: * * Generated from Phase 4 Mega-Upgrade audit of 30 HTML pages. */ :root { /* ── Core Palette ─────────────────────────────────────────────────── */ --bg-deep: #000b06; --bg-surface: #001a0d; --bg-card: #00120a; --bg-card-hover: #001f12; --bg-input: rgba(255, 255, 255, 0.07); /* was near-black rgba(0,255,163,.04) = 1.02:1 — invisible */ --bg-modal: rgba(0, 0, 0, 0.85); --bg-overlay: rgba(0, 11, 6, 0.92); /* ── Accent Colors ────────────────────────────────────────────────── */ --accent: #00ffa3; --accent-dim: rgba(0, 255, 163, 0.15); --accent-glow: rgba(0, 255, 163, 0.3); --accent-text: #00ffa3; --accent-hover: #00cc82; /* ── Text Variants ─────────────────────────────────────────────────── */ /* --text was not previously defined, causing cyclic var(--text) bugs across pages. Resolved here as a proper light-on-dark body text color. */ --text: rgba(219, 229, 245, 1.0); /* WCAG: 15:1 on #000b06 ✅ */ --text-dim: rgba(200, 255, 240, 0.65); /* bumped .50 → .65 for readability */ --muted: rgba(200, 255, 240, 0.70); /* bumped .58 → .70 for readability */ /* ── Status Colors ────────────────────────────────────────────────── */ --success: #00ffa3; --warning: #fad015; --danger: #ff4d6d; --info: #3ac9ff; --purple: #a855f7; --orange: #f97316; --pink: #f472b6; /* ── Safety Tier Colors ───────────────────────────────────────────── */ --tier-safe: #00ffa3; --tier-elevated: #fad015; --tier-restricted:#ff4d6d; /* ── Category Colors (from _CAT_COLORS in bridge) ─────────────────── */ --cat-intelligence: #10b981; --cat-content: #f59e0b; --cat-security: #e91e63; --cat-memory: #a78bfa; --cat-internet: #3ac9ff; --cat-banking: #fad015; --cat-store: #2ecc71; --cat-peptides: #e879f9; --cat-system: #9ca3af; --cat-comms: #60a5fa; --cat-people: #f472b6; --cat-pipeline: #7c3aed; --cat-red-hat: #ff4d6d; --cat-blue-hat: #3ac9ff; --cat-threat-intel: #b0ffe8; --cat-lab: #00d4aa; --cat-osint: #f97316; --cat-investigator: #e879f9; --cat-support: #a78bfa; --cat-command: #00c8ff; --cat-ui-ux: #f43f5e; --cat-engineering: #6366f1; --cat-testing: #22c55e; --cat-devops: #fb923c; /* ── Typography ───────────────────────────────────────────────────── */ --font-mono: 'Share Tech Mono', 'Roboto Mono', 'Fira Code', monospace; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-size-xs: 10px; --font-size-sm: 12px; --font-size-base: 13px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --line-height: 1.6; /* ── Spacing ──────────────────────────────────────────────────────── */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; /* ── Borders & Radius ─────────────────────────────────────────────── */ /* Border scale lifted for WCAG 1.4.11 Non-Text Contrast on #000b06: rgba(0,255,163,.50) = 4.28:1 ✅ rgba(255,255,255,.35) = 3.10:1 ✅ */ --border: rgba(255, 255, 255, 0.35); /* WCAG v2: .20→.35 for 3.10:1 ✅ (was 1.73:1) */ --border-focus: rgba(0, 255, 163, 0.55); /* neon green, prominent */ --border-color: var(--border); --border-hover: rgba(0, 255, 163, 0.40); /* was .30 */ --border-active: rgba(0, 255, 163, 0.60); /* brightest state */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* ── Shadows ──────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 20px rgba(0, 255, 163, 0.15); --shadow-neon: 0 0 10px rgba(0, 255, 163, 0.3), 0 0 40px rgba(0, 255, 163, 0.1); /* ── Transitions ──────────────────────────────────────────────────── */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* ── Spring Physics Easings (kinetics.colorion.co + Apple macOS 26) ── */ /* Card spring: response=0.42, damping=0.86 — contained-app ResourceGlassCard */ --spring-card: 0.42s cubic-bezier(0.34, 1.06, 0.64, 1.00); /* Snappy overshoot — kinetics "Card Resize" */ --spring-snappy: 0.50s cubic-bezier(0.34, 1.56, 0.64, 1.00); /* Smooth entry — kinetics "Accordion Spring" */ --spring-smooth: 0.45s cubic-bezier(0.16, 1.00, 0.30, 1.00); /* Toast bounce — kinetics "Toast Overshoot" */ --spring-bounce: 0.55s cubic-bezier(0.18, 1.25, 0.40, 1.00); /* Tab glide — kinetics "Tab Pill Glide" */ --spring-glide: 0.40s cubic-bezier(0.65, 0.00, 0.35, 1.00); /* Magnetic hover — kinetics "Magnetic Button" */ --spring-magnetic: 0.15s cubic-bezier(0.40, 0.00, 0.20, 1.00); /* Micro-interactions (ripple, badge pop) */ --spring-micro: 0.20s cubic-bezier(0.34, 1.56, 0.64, 1.00); /* Number bump — kinetics "Number Counter" */ --spring-bump: 0.40s cubic-bezier(0.34, 1.56, 0.64, 1.00); /* ── Z-index Scale ────────────────────────────────────────────────── */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-modal: 500; --z-toast: 700; --z-tooltip: 900; /* ── Layout ───────────────────────────────────────────────────────── */ --content-max-width: 1400px; --sidebar-width: 280px; --header-height: 56px; --touch-target: 44px; /* minimum mobile tap target */ /* ── Safe Areas (mobile) ──────────────────────────────────────────── */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* ── iOS Enhancement Tokens (2026) ─────────────────────────────── */ --radius-ios: 14px; --radius-ios-lg: 20px; --radius-ios-sm: 10px; --space-ios: 16px; --space-ios-lg: 20px; --font-ios: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif; } /* ── Reduce-Motion Kill-Switch ────────────────────────────────────── */ /* HyThemes.setAnimations('off') sets data-reduce-motion="true" on . This collapses ALL spring/glow/glass animations globally in one place. Equivalent to prefers-reduced-motion but user-controlled via settings. */ [data-reduce-motion="true"] *, [data-reduce-motion="true"] *::before, [data-reduce-motion="true"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* Also zero out our custom spring timing vars so nothing sneaks through */ [data-reduce-motion="true"] { --spring-card: 0.01ms linear; --spring-snappy: 0.01ms linear; --spring-smooth: 0.01ms linear; --spring-bounce: 0.01ms linear; --spring-glide: 0.01ms linear; --spring-magnetic: 0.01ms linear; --spring-micro: 0.01ms linear; --spring-bump: 0.01ms linear; --transition-fast: 0.01ms linear; --transition-normal: 0.01ms linear; --transition-slow: 0.01ms linear; --glass-spring: 0.01ms linear; --glass-spring-fast: 0.01ms linear; --glass-spring-slow: 0.01ms linear; --glass-morph: 0.01ms linear; /* v11 springs */ --v11-spring: 0.01ms linear; --v11-spring-card: 0.01ms linear; --os-spring: 0.01ms linear; --os-card: 0.01ms linear; --os-bounce: 0.01ms linear; --os-accordion: 0.01ms linear; --os-glide: 0.01ms linear; /* Glow: off */ --shadow-glow: none; --shadow-neon: none; --lg-glow: none; --lg-glow-strong: none; } /* ── Base Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 0; background: var(--bg-deep); color: var(--accent-text); font-family: var(--font-mono); font-size: var(--font-size-base); line-height: var(--line-height); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Scrollbar ──────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); } /* ── Selection ──────────────────────────────────────────────────────── */ ::selection { background: var(--accent-dim); color: var(--accent-text); } /* ── Focus ──────────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Utility Classes ────────────────────────────────────────────────── */ .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--danger); } .text-info { color: var(--info); } .text-muted { color: var(--muted); } .text-dim { color: var(--text-dim); } .bg-card { background: var(--bg-card); } .bg-surface { background: var(--bg-surface); } /* ── Safety Badge Classes ───────────────────────────────────────────── */ .safety-safe { color: var(--tier-safe); } .safety-elevated { color: var(--tier-elevated); } .safety-restricted { color: var(--tier-restricted); } .badge-safe { background:var(--accent-dim); color: var(--tier-safe); padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--font-size-xs); } .badge-elevated { background: rgba(250,208,21,.12); color: var(--tier-elevated); padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--font-size-xs); } .badge-restricted { background:var(--accent-dim); color: var(--tier-restricted); padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--font-size-xs); } /* ── Hypatia Design Standard 1.0 tokens (hypatia-ds.css) ── */ :root { --hy-ds-version: '1.0'; /* Glow scale */ --hy-glow-sm: 0 0 10px var(--accent-glow, rgba(0,255,163,0.25)); --hy-glow-md: 0 0 20px var(--accent-glow, rgba(0,255,163,0.28)), 0 0 40px color-mix(in srgb, var(--accent, #00ffa3) 10%, transparent); --hy-glow-lg: 0 0 30px var(--accent-glow, rgba(0,255,163,0.30)), 0 0 60px color-mix(in srgb, var(--accent, #00ffa3) 12%, transparent), 0 0 100px color-mix(in srgb, var(--accent, #00ffa3) 6%, transparent); /* Selected-state ring */ --hy-selected-ring: 0 0 0 5px var(--accent-dim, rgba(0,255,163,0.15)), 0 0 24px var(--accent-glow, rgba(0,255,163,0.28)); /* Glass backdrop */ --hy-banner-blur: saturate(220%) blur(32px) brightness(1.10); /* Typography */ --hy-font-display: -apple-system, 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif; --hy-font-body: -apple-system, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif; --hy-font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace; }