/* ============================================================================
HackHack Design System — colors_and_type.css
----------------------------------------------------------------------------
A dark-mode-first, security-flavored fintech system. The structural rigor
is borrowed from Stripe (precise type scale, conservative radii, layered
shadows, weight-300 display type), but the *palette* is HackHack: deep
navy-black canvas, neon mint accent with a soft glow, cyan secondary,
ruby alert. The wordmark is mono and italic — the duck is the mascot.
============================================================================ */
/* ---------- 1. Fonts ----------
Display / body : Sohne Var (proprietary, not bundled). Fallback chain
uses Inter Tight which carries similar geometry & supports OpenType
`ss01` gracefully (Inter has alternate-a via cv01). On systems without
either, SF Pro Display is acceptable.
Mono : JetBrains Mono — closest free analogue to "SF Mono"
used in the live hackhack.ai wordmark spec. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,500&family=Source+Code+Pro:wght@400;500;700&display=swap');
:root {
/* ---------- 2. Brand colors (from hackhack.ai live spec) ---------- */
--hh-bg: #05080f; /* canvas — deep near-black blue */
--hh-bg-raised: #0b1220; /* elevated surface */
--hh-bg-sunken: #02050a; /* deeper recess */
--hh-text: #ebf3ff; /* body / "hack" first half */
--hh-text-muted: #92a4bf; /* secondary copy */
--hh-text-dim: #5d6f8a; /* tertiary / metadata */
--hh-mint: #7effa4; /* signature — the second "hack" */
--hh-mint-glow: rgba(126,255,164,0.38);
--hh-mint-soft: rgba(126,255,164,0.12);
--hh-mint-border: rgba(126,255,164,0.32);
--hh-mint-deep: #4ad683; /* hover / pressed */
--hh-cyan: #67e4ff; /* secondary accent (link, info) */
--hh-cyan-soft: rgba(103,228,255,0.14);
--hh-cyan-border: rgba(103,228,255,0.30);
--hh-duck-blue: #1f7ad6; /* duck beak — used sparingly */
--hh-duck-blue-deep: #134a85;
--hh-ruby: #e63b4a; /* alert / beta / destructive */
--hh-ruby-text: #ffe9ea;
--hh-ruby-soft: rgba(230,59,74,0.18);
--hh-ruby-border: rgba(230,59,74,0.45);
--hh-amber: #f5b35a; /* warning / medium */
--hh-amber-soft: rgba(245,179,90,0.18);
--hh-orange: #ff8a3d; /* high severity */
--hh-orange-soft: rgba(255,138,61,0.18);
--hh-orange-border: rgba(255,138,61,0.42);
--hh-violet: #b388ff; /* critical severity (exotic / max) */
--hh-violet-soft: rgba(179,136,255,0.16);
--hh-violet-border: rgba(179,136,255,0.42);
--hh-violet-glow: 0 0 14px rgba(179,136,255,0.45);
/* Severity scale (semantic aliases) — 5 tiers */
--hh-sev-info: var(--hh-cyan);
--hh-sev-low: var(--hh-mint);
--hh-sev-medium: var(--hh-amber);
--hh-sev-high: var(--hh-orange);
--hh-sev-critical: var(--hh-violet);
/* ---------- 3. Surfaces, borders, dividers ---------- */
--hh-surface-1: #0b1220;
--hh-surface-2: #111a2c;
--hh-surface-3: #18243b;
--hh-border: #1d2a44;
--hh-border-strong: #2a3a5a;
--hh-border-dashed: #2a3a5a;
--hh-divider: rgba(235,243,255,0.06);
/* ---------- 4. Shadows (multi-layer, mint-tinted glows + cool depth) ---------- */
--hh-shadow-ambient: 0 1px 2px rgba(0,0,0,0.4);
--hh-shadow-1: 0 6px 16px -4px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.35);
--hh-shadow-2: 0 30px 45px -30px rgba(0,0,0,0.7), 0 18px 36px -18px rgba(5,8,15,0.6);
--hh-shadow-3: 0 30px 60px -20px rgba(0,0,0,0.75), 0 14px 28px -14px rgba(0,0,0,0.5);
--hh-glow-mint: 0 0 18px rgba(126,255,164,0.38);
--hh-glow-mint-strong: 0 0 24px rgba(126,255,164,0.55), 0 0 4px rgba(126,255,164,0.85);
--hh-glow-cyan: 0 0 18px rgba(103,228,255,0.40);
--hh-ring-focus: 0 0 0 2px var(--hh-bg), 0 0 0 4px var(--hh-mint);
/* ---------- 5. Radii (Stripe-conservative) ---------- */
--hh-radius-1: 2px;
--hh-radius-2: 4px; /* buttons, badges, pills (workhorse) */
--hh-radius-3: 6px; /* cards, nav */
--hh-radius-4: 8px; /* featured cards */
--hh-radius-5: 12px; /* dialogs */
--hh-radius-pill: 999px;
/* ---------- 6. Spacing (8px base, dense low end) ---------- */
--hh-space-0: 0px;
--hh-space-1: 2px;
--hh-space-2: 4px;
--hh-space-3: 6px;
--hh-space-4: 8px;
--hh-space-5: 12px;
--hh-space-6: 16px;
--hh-space-7: 20px;
--hh-space-8: 24px;
--hh-space-9: 32px;
--hh-space-10: 48px;
--hh-space-11: 64px;
--hh-space-12: 96px;
/* ---------- 7. Typography stacks ---------- */
--font-sans: "Inter Tight", "Sohne Var", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "JetBrains Mono", "SF Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-code: "Source Code Pro", "JetBrains Mono", ui-monospace, monospace;
--ot-ss01: "ss01" on, "cv01" on; /* alternate a/g/l where supported */
--ot-tnum: "tnum" on, "lnum" on; /* tabular figures */
}
/* ============================================================================
Base
============================================================================ */
html, body {
background: var(--hh-bg);
color: var(--hh-text);
font-family: var(--font-sans);
font-weight: 300;
font-feature-settings: var(--ot-ss01);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ============================================================================
Type scale (semantic classes)
----------------------------------------------------------------------------
Weight-300 by default; tracking tightens proportionally with size.
Mirrors Stripe's "whisper-weight" display approach but on dark canvas.
============================================================================ */
.hh-display-hero {
font-family: var(--font-sans);
font-weight: 300;
font-size: 56px;
line-height: 1.03;
letter-spacing: -1.4px;
color: var(--hh-text);
font-feature-settings: var(--ot-ss01);
}
.hh-display-large {
font-weight: 300;
font-size: 48px;
line-height: 1.1;
letter-spacing: -0.96px;
color: var(--hh-text);
font-feature-settings: var(--ot-ss01);
}
.hh-h1 { font-weight: 300; font-size: 40px; line-height: 1.08; letter-spacing: -0.8px; font-feature-settings: var(--ot-ss01); }
.hh-h2 { font-weight: 300; font-size: 32px; line-height: 1.10; letter-spacing: -0.64px; font-feature-settings: var(--ot-ss01); }
.hh-h3 { font-weight: 300; font-size: 26px; line-height: 1.12; letter-spacing: -0.26px; font-feature-settings: var(--ot-ss01); }
.hh-h4 { font-weight: 400; font-size: 22px; line-height: 1.20; letter-spacing: -0.22px; font-feature-settings: var(--ot-ss01); }
.hh-h5 { font-weight: 500; font-size: 18px; line-height: 1.30; letter-spacing: -0.10px; font-feature-settings: var(--ot-ss01); }
.hh-body-lg { font-weight: 300; font-size: 18px; line-height: 1.50; color: var(--hh-text); }
.hh-body { font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--hh-text); }
.hh-body-sm { font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--hh-text-muted); }
.hh-caption { font-weight: 400; font-size: 13px; line-height: 1.45; color: var(--hh-text-muted); }
.hh-micro { font-weight: 400; font-size: 11px; line-height: 1.40; color: var(--hh-text-dim); letter-spacing: 0.04em; text-transform: uppercase; }
.hh-tabular { font-feature-settings: var(--ot-tnum); }
/* Mono — the technical voice; used in code, labels, badges, the wordmark */
.hh-mono { font-family: var(--font-mono); font-weight: 500; }
.hh-mono-label { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--hh-text-muted); }
.hh-code { font-family: var(--font-code); font-weight: 500; font-size: 13px; line-height: 1.7; }
/* The wordmark itself */
.hh-wordmark {
font-family: var(--font-mono);
font-style: italic;
font-weight: 500;
font-size: clamp(1.8rem, 5vw, 3rem);
letter-spacing: 0.02em;
text-transform: lowercase;
color: var(--hh-text);
display: inline-flex;
align-items: baseline;
}
.hh-wordmark .hh-wordmark__half2 {
color: var(--hh-mint);
text-shadow: var(--hh-glow-mint);
}
/* ============================================================================
Element semantics — let raw /
/ render cleanly
============================================================================ */
h1 { font: 300 48px/1.10 var(--font-sans); letter-spacing: -0.96px; color: var(--hh-text); font-feature-settings: var(--ot-ss01); margin: 0 0 var(--hh-space-6); }
h2 { font: 300 32px/1.10 var(--font-sans); letter-spacing: -0.64px; color: var(--hh-text); font-feature-settings: var(--ot-ss01); margin: 0 0 var(--hh-space-5); }
h3 { font: 400 22px/1.20 var(--font-sans); letter-spacing: -0.22px; color: var(--hh-text); font-feature-settings: var(--ot-ss01); margin: 0 0 var(--hh-space-4); }
h4 { font: 500 18px/1.30 var(--font-sans); letter-spacing: -0.10px; color: var(--hh-text); font-feature-settings: var(--ot-ss01); margin: 0 0 var(--hh-space-4); }
p { font: 400 16px/1.55 var(--font-sans); color: var(--hh-text); margin: 0 0 var(--hh-space-5); }
small { font-size: 13px; color: var(--hh-text-muted); }
code, kbd { font-family: var(--font-code); font-size: 0.9em; }
a { color: var(--hh-cyan); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 120ms ease; }
a:hover { border-bottom-color: var(--hh-cyan); }
hr { border: none; border-top: 1px solid var(--hh-divider); margin: var(--hh-space-8) 0; }