/* ============================================================================ Reponomics Design System — Colors & Typography ---------------------------------------------------------------------------- Tokens distilled from the Reponomics Dashboard (Repository Growth Dashboard, GitHub Traffic Report Template). Two themes — dark is the canonical, default experience; light is honored when the user prefers it. Brand direction: Palette B "GitHub Native" — a single flat blue accent (#1f6feb dark, #0969da light). The legacy periwinkle→peach gradient is kept only as an opt-in utility via `.brand-gradient` for transitional surfaces. Usage: // tokens publish at :root by default // same tokens, explicit scope // switch to light mode ⚠ CONTRAST — measured against --bg (#0a0e14), see DESIGN_NOTES.md § 3: --text 16.37:1 ok --text-muted 6.29:1 ok --text-dim 4.21:1 FAILS the 4.5:1 body threshold — decorative or large type only, never body copy --accent 4.17:1 non-text only (clears 3:1 for UI marks, not text). For accent-coloured TEXT use ~#5b9eff (7.17:1). How these tokens are applied per page — the two signature devices, the vault's scoped palette, and measured copy limits — is in DESIGN_NOTES.md. ============================================================================ */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap"); /* ------------------------------------------------------------------ Tokens */ :root, .reponomics, :root.reponomics { /* Surfaces (dark) — three-step ladder: bg → card-2 → card/raised. Cards visibly lift from the page; raised chrome (chips, buttons) shares the card-top tone so they read as "floating" without an extra surface level. */ --bg: #0a0e14; --bg-raised: #1c2128; --bg-card: #1c2128; --bg-card-2: #14191f; --border: #30363d; --border-soft: #21262d; /* Text (dark) */ --text: #e6edf3; --text-muted: #8b949e; --text-dim: #6e7681; /* Brand accents — flat, no gradient by default */ --accent: #1f6feb; /* GitHub blue — the one brand accent */ --accent-2: #bf6a02; /* warm amber — reserved for star/fork metrics + secondary moments */ /* Series / data colors (dark) — chosen to remain distinct under deuteranopia and protanopia. Clones is pink rather than purple because purple collapses into blue (Views) for red-green-colorblind viewers. */ --c-views: #58a6ff; --c-uniques: #3fb950; --c-clones: #cc79a7; --c-cloners: #ffa657; --c-positive: #3fb950; --c-negative: #f85149; /* Categorical palette — Okabe-Ito core (1–7) extended with distinct non-clashing hues at 8–10 so adjacent picks in larger sets don't collapse together. Still colorblind-safe at small N. */ --cat-1: #56b4e9; --cat-2: #e69f00; --cat-3: #009e73; --cat-4: #cc79a7; --cat-5: #0072b2; --cat-6: #d55e00; --cat-7: #f0e442; --cat-8: #7f3f98; /* deep purple — clearly distinct from #CC79A7 pink */ --cat-9: #117733; /* forest green — clearly darker than #009E73 */ --cat-10: #6b4423; /* warm brown — new hue, no overlap with anything above */ /* Glow / atmosphere — single accent glow, no warm overlay */ --hero-glow-1: rgba(31, 111, 235, 0.1); --hero-glow-2: rgba(31, 111, 235, 0.04); /* faint, same hue — subtle depth */ /* Chart chrome */ --chart-grid: rgba(48, 54, 61, 0.4); --chart-axis: rgba(48, 54, 61, 0.7); --chart-tooltip-bg: rgba(22, 27, 34, 0.96); --chart-tooltip-border: #30363d; /* Surface highlights & elevation */ --inset-highlight: rgba(255, 255, 255, 0.03); --card-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); --card-shadow-hover: 0 18px 36px rgba(0, 0, 0, 0.45); /* Geometry */ --radius-sm: 6px; --radius: 14px; --radius-lg: 18px; --radius-pill: 999px; /* Spacing scale */ --s-0: 0.25rem; --s-1: 0.5rem; --s-2: 0.75rem; --s-3: 1rem; --s-4: 1.25rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; /* Type families */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace; /* Type scale */ --fs-display: clamp(1.75rem, 4vw, 2.5rem); --fs-h2: 1rem; --fs-h3: 0.95rem; --fs-body: 0.95rem; --fs-meta: 0.88rem; --fs-label: 0.72rem; --fs-eyebrow: 0.76rem; color-scheme: dark; } /* ------------------------------------------------------ Light theme override */ :root[data-theme="light"], .reponomics[data-theme="light"], :root.reponomics[data-theme="light"] { --bg: #ffffff; --bg-raised: #ffffff; --bg-card: #ffffff; --bg-card-2: #f6f8fa; --border: #d0d7de; --border-soft: #d8dee4; --text: #1f2328; --text-muted: #57606a; --text-dim: #6e7781; --accent: #0969da; /* GitHub blue, light variant */ --accent-2: #9a6700; /* warm amber, deeper for legibility on white */ --c-views: #0969da; --c-uniques: #1a7f37; --c-clones: #af3aa6; --c-cloners: #bf6a02; --c-positive: #1a7f37; --c-negative: #cf222e; --hero-glow-1: rgba(9, 105, 218, 0.08); --hero-glow-2: rgba(9, 105, 218, 0.03); --chart-grid: rgba(140, 149, 159, 0.18); --chart-axis: rgba(140, 149, 159, 0.5); --chart-tooltip-bg: rgba(255, 255, 255, 0.98); --chart-tooltip-border: #d0d7de; --inset-highlight: rgba(255, 255, 255, 0.6); --card-shadow: 0 1px 0 rgba(31, 35, 40, 0.04), 0 4px 14px rgba(31, 35, 40, 0.06); --card-shadow-hover: 0 2px 0 rgba(31, 35, 40, 0.06), 0 8px 22px rgba(31, 35, 40, 0.1); color-scheme: light; } /* ------------------------------------------------------------- Semantic type */ .reponomics body, .reponomics .body, body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.55; color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Brand wordmark — N3 canonical direction. Inter Black, lowercase, tight letter-spacing. The period is the accent. */ .reponomics h1.brand, h1.brand { font-family: var(--font-sans); font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 900; letter-spacing: -0.055em; line-height: 0.95; color: var(--text); text-transform: lowercase; font-feature-settings: "ss01"; } .reponomics h1.brand .accent, h1.brand .accent, .reponomics .h1 .accent { color: var(--accent); } .reponomics .brand-eyebrow, .brand-eyebrow { font-family: var(--font-sans); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.45rem; } .reponomics h2, .reponomics .h2 { font-family: var(--font-sans); font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .reponomics .tagline { color: var(--text-muted); font-size: var(--fs-body); } .reponomics .meta, .reponomics .updated { color: var(--text-muted); font-size: var(--fs-meta); line-height: 1.5; } .reponomics .click-hint { color: var(--text-muted); font-size: 0.83rem; line-height: 1.45; } .reponomics .label, .reponomics .stat-label { color: var(--text-muted); font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .reponomics .eyebrow { font-family: var(--font-mono); color: var(--text-muted); font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .reponomics .mono, .reponomics code, .reponomics .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .reponomics .stat-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--text); }