/* * HumanMetrics — CSS Custom Properties * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * AUTO-DERIVED from tokens.json v2.0.0 * DO NOT HAND-EDIT. Make changes in tokens.json, then regenerate. * * Font dependency (add to ): * */ :root { /* ── Primitive: Color ─────────────────────────── */ --hm-black-0: #050505; --hm-black-1: #111111; --hm-black-2: #1A1A1A; --hm-gray-200: #262626; --hm-gray-300: #333333; --hm-gray-400: #555555; --hm-gray-700: #888888; --hm-gray-800: #A3A3A3; --hm-gray-900: #E5E5E5; --hm-gray-950: #FFFFFF; --hm-lime-400: #9CDA2B; --hm-lime-500: #74E600; --hm-teal-400: #00CFE5; --hm-blue-400: #10A5F5; --hm-peach-400: #F4926A; --hm-red-100: #3A1014; --hm-red-200: #5C1A1F; --hm-red-400: #FF4D4D; --hm-amber-100: #3D2800; --hm-amber-200: #5C3D00; --hm-amber-400: #F5A623; --hm-green-100: #0A2E13; --hm-green-200: #144A23; --hm-green-400: #74E600; /* ── Primitive: Typography ────────────────────── */ --hm-font-sans: 'Manrope', system-ui, sans-serif; --hm-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace; --hm-weight-light: 300; --hm-weight-regular: 400; --hm-weight-medium: 500; --hm-weight-semibold: 600; --hm-weight-bold: 700; --hm-weight-extrabold:800; /* ── Primitive: Spacing ───────────────────────── */ --hm-space-1: 4px; --hm-space-2: 8px; --hm-space-3: 12px; --hm-space-4: 16px; --hm-space-5: 20px; --hm-space-6: 24px; --hm-space-8: 32px; --hm-space-10: 40px; --hm-space-12: 48px; --hm-space-14: 56px; --hm-space-16: 64px; --hm-space-20: 80px; --hm-space-25: 100px; /* ── Primitive: Radius ────────────────────────── */ --hm-radius-sm: 8px; --hm-radius-md: 12px; --hm-radius-lg: 16px; --hm-radius-xl: 20px; --hm-radius-full: 9999px; /* ── Primitive: Motion ────────────────────────── */ --hm-ease: cubic-bezier(0.4, 0, 0.2, 1); --hm-duration-fast: 150ms; --hm-duration-base: 250ms; --hm-duration-slow: 400ms; --hm-duration-slower:900ms; /* ── Primitive: Shadow ────────────────────────── */ --hm-shadow-none: none; --hm-shadow-glow-lime: 0 0 28px rgba(156, 218, 43, 0.35); --hm-shadow-glow-teal: 0 0 40px rgba(0, 207, 229, 0.06); --hm-shadow-lift: 0 12px 40px rgba(0, 207, 229, 0.06); --hm-shadow-card-inner: inset 0 1px 0 rgba(255, 255, 255, 0.04); /* ── Semantic: Background ─────────────────────── */ --hm-bg-page: var(--hm-black-0); --hm-bg-surface: var(--hm-black-1); --hm-bg-surface2: var(--hm-black-2); --hm-bg-overlay: rgba(5, 5, 5, 0.88); /* ── Semantic: Border ─────────────────────────── */ --hm-border-default: var(--hm-gray-200); --hm-border-hover: var(--hm-gray-300); --hm-border-subtle: rgba(255, 255, 255, 0.06); /* ── Semantic: Text ───────────────────────────── */ --hm-text-primary: var(--hm-gray-950); --hm-text-body: var(--hm-gray-900); --hm-text-muted: var(--hm-gray-800); --hm-text-dim: var(--hm-gray-400); --hm-text-mono: var(--hm-teal-400); /* ── Semantic: Brand ──────────────────────────── */ --hm-brand-primary: var(--hm-lime-400); /* #9CDA2B */ --hm-brand-secondary: var(--hm-teal-400); /* #00CFE5 */ --hm-brand-tertiary: var(--hm-blue-400); /* #10A5F5 */ --hm-brand-accent: var(--hm-peach-400); /* #F4926A */ /* ── Semantic: Status — Attention ─────────────── */ --hm-attn-bg: var(--hm-red-100); --hm-attn-bd: var(--hm-red-200); --hm-attn-tx: var(--hm-red-400); /* ── Semantic: Status — Watch ─────────────────── */ --hm-watch-bg: var(--hm-amber-100); --hm-watch-bd: var(--hm-amber-200); --hm-watch-tx: var(--hm-amber-400); /* ── Semantic: Status — Healthy ───────────────── */ --hm-hlth-bg: var(--hm-green-100); --hm-hlth-bd: var(--hm-green-200); --hm-hlth-tx: var(--hm-green-400); /* ── Semantic: Layout ─────────────────────────── */ --hm-max-narrow: 860px; --hm-max-default: 1100px; --hm-max-wide: 1200px; --hm-nav-height: 68px; --hm-section-padV: var(--hm-space-25); --hm-section-padH: var(--hm-space-12); } /* ══════════════════════════════════════════════════ TYPOGRAPHY UTILITIES ══════════════════════════════════════════════════ */ .hm-display { font-family: var(--hm-font-sans); font-size: clamp(38px, 8.5vw, 116px); font-weight: var(--hm-weight-bold); letter-spacing: -0.02em; line-height: 1.0; color: var(--hm-text-primary); } .hm-h1 { font-family: var(--hm-font-sans); font-size: clamp(26px, 4vw, 42px); font-weight: var(--hm-weight-light); line-height: 1.15; color: var(--hm-text-primary); } .hm-h2 { font-family: var(--hm-font-sans); font-size: clamp(20px, 3vw, 32px); font-weight: var(--hm-weight-semibold); line-height: 1.2; color: var(--hm-text-primary); } .hm-body { font-family: var(--hm-font-sans); font-size: 17px; font-weight: var(--hm-weight-regular); line-height: 1.8; color: var(--hm-text-body); } .hm-small { font-family: var(--hm-font-sans); font-size: 14px; font-weight: var(--hm-weight-regular); line-height: 1.7; color: var(--hm-text-muted); } .hm-eyebrow { font-family: var(--hm-font-sans); font-size: 10px; font-weight: var(--hm-weight-bold); letter-spacing: 0.22em; text-transform: uppercase; color: var(--hm-brand-primary); } .hm-label { font-family: var(--hm-font-sans); font-size: 11px; font-weight: var(--hm-weight-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hm-text-muted); } .hm-mono { font-family: var(--hm-font-mono); font-size: 13px; color: var(--hm-text-mono); } /* Data kicker (10px, bold, widest tracking, uppercase) */ .hm-kicker { font-family: var(--hm-font-sans); font-size: 10px; font-weight: var(--hm-weight-bold); letter-spacing: 0.22em; text-transform: uppercase; color: var(--hm-text-body); } /* ══════════════════════════════════════════════════ BUTTON UTILITIES ══════════════════════════════════════════════════ */ .hm-btn-primary { display: inline-block; background: var(--hm-brand-primary); color: var(--hm-bg-page); font-family: var(--hm-font-sans); font-size: 12px; font-weight: var(--hm-weight-bold); letter-spacing: 0.10em; text-transform: uppercase; padding: 14px 30px; border-radius: var(--hm-radius-sm); border: none; cursor: pointer; text-decoration: none; transition: opacity var(--hm-duration-base) var(--hm-ease), box-shadow var(--hm-duration-slow) var(--hm-ease); } .hm-btn-primary:hover { opacity: 0.92; box-shadow: var(--hm-shadow-glow-lime); } .hm-btn-primary:focus-visible { outline: 2px solid var(--hm-brand-primary); outline-offset: 3px; } .hm-btn-ghost { display: inline-block; background: transparent; color: var(--hm-text-body); border: 1px solid var(--hm-border-hover); font-family: var(--hm-font-sans); font-size: 12px; font-weight: var(--hm-weight-medium); letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 30px; border-radius: var(--hm-radius-sm); cursor: pointer; text-decoration: none; transition: border-color var(--hm-duration-base) var(--hm-ease), color var(--hm-duration-base) var(--hm-ease); } .hm-btn-ghost:hover { border-color: var(--hm-brand-secondary); color: var(--hm-brand-secondary); } .hm-btn-ghost:focus-visible { outline: 2px solid var(--hm-brand-primary); outline-offset: 3px; } .hm-btn-outline { display: inline-flex; align-items: center; gap: var(--hm-space-2); background: transparent; color: var(--hm-brand-primary); border: 1px solid var(--hm-brand-primary); font-family: var(--hm-font-sans); font-size: 13px; font-weight: var(--hm-weight-semibold); padding: 10px 20px; border-radius: var(--hm-radius-sm); cursor: pointer; text-decoration: none; transition: background var(--hm-duration-base) var(--hm-ease), color var(--hm-duration-base) var(--hm-ease); } .hm-btn-outline:hover { background: var(--hm-brand-primary); color: var(--hm-bg-page); } /* ══════════════════════════════════════════════════ CARD UTILITIES ══════════════════════════════════════════════════ */ .hm-card { background: var(--hm-bg-surface); border: 1px solid var(--hm-border-default); border-radius: var(--hm-radius-lg); padding: var(--hm-space-8); box-shadow: var(--hm-shadow-card-inner); } .hm-card-hover { background: var(--hm-bg-surface2); border: 1px solid var(--hm-border-default); border-radius: var(--hm-radius-xl); padding: 44px 36px; box-shadow: var(--hm-shadow-card-inner); cursor: pointer; transition: border-color var(--hm-duration-slow) var(--hm-ease), transform var(--hm-duration-slow) var(--hm-ease), box-shadow var(--hm-duration-slow) var(--hm-ease); } .hm-card-hover:hover { border-color: rgba(0, 207, 229, 0.35); transform: translateY(-4px); box-shadow: var(--hm-shadow-lift); } /* ══════════════════════════════════════════════════ STATUS BADGE UTILITIES ══════════════════════════════════════════════════ */ .hm-badge { display: inline-flex; align-items: center; gap: var(--hm-space-2); padding: 4px 10px; border-radius: var(--hm-radius-full); border: 1px solid; font-size: 10px; font-weight: var(--hm-weight-bold); letter-spacing: 0.14em; text-transform: uppercase; } .hm-badge-attention { background: var(--hm-attn-bg); border-color: var(--hm-attn-bd); color: var(--hm-attn-tx); } .hm-badge-watch { background: var(--hm-watch-bg); border-color: var(--hm-watch-bd); color: var(--hm-watch-tx); } .hm-badge-healthy { background: var(--hm-hlth-bg); border-color: var(--hm-hlth-bd); color: var(--hm-hlth-tx); } /* ══════════════════════════════════════════════════ FOCUS — Global rule (accessibility) ══════════════════════════════════════════════════ */ :focus-visible { outline: 2px solid var(--hm-brand-primary); outline-offset: 3px; }