/* ============================================================ comment.gg — Color System ------------------------------------------------------------ Warm-neutral chrome + a single coral accent ("Flare"). Status colors are load-bearing: open = coral · resolved = green · orphaned = slate (structural) Two themes: light (default — marketing, guest, email, docs) and dark (the review chrome — set [data-theme="dark"]). ============================================================ */ :root { /* ---- Base ramp: Stone (warm neutral) ---------------------- */ --stone-0: #FFFFFF; --stone-25: #FBFAF8; --stone-50: #F6F4F0; --stone-100: #EEEBE5; --stone-150: #E5E1DA; --stone-200: #D8D3C9; --stone-300: #C2BCB0; --stone-400: #9E988B; --stone-500: #7A7468; --stone-600: #5B564C; --stone-700: #423E36; --stone-800: #2B2823; --stone-850: #211E1A; --stone-900: #1A1815; --stone-950: #110F0C; /* ---- Accent ramp: Flare (coral / clay) -------------------- */ --flare-50: #FDEFEA; --flare-100: #FBDDD2; --flare-200: #F7BBA6; --flare-300: #F39B82; --flare-400: #EE7657; --flare-500: #E85D3C; /* primary accent */ --flare-600: #CF4A2C; /* hover / press */ --flare-700: #A93A22; --flare-800: #7E2C1B; /* ---- Status ramp: Go (resolved green, the "GG" green) ----- */ --go-50: #E7F4ED; --go-100: #C9E8D6; --go-200: #97D3B0; --go-300: #5FB985; --go-400: #2E9D63; --go-500: #1B8A53; /* resolved */ --go-600: #137044; --go-700: #0E5634; /* ---- Status ramp: Amber (pending / capturing) ------------- */ --amber-50: #FBF1DF; --amber-100: #F6E0B8; --amber-300: #E9B662; --amber-500: #D9912B; /* pending / processing */ --amber-600: #B6741A; /* ---- Status ramp: Slate (orphaned — the ghost) ------------ */ --slate-100: #E7E6E3; --slate-300: #BDBBB5; --slate-400: #97948D; --slate-500: #79766E; /* orphaned base */ --slate-600: #5E5C55; /* ---- Danger (destructive only — never playful) ----------- */ --danger-50: #FCEDEC; --danger-300: #E89C97; --danger-500: #C8392E; --danger-600: #A52A22; /* ---- Identity palette — the "flags" people claim --------- Colorful but grown-up. Assign by hashing a name/id. Deliberately NOT the status hues, so a flag never reads as open/resolved. */ --identity-clay: #C8633F; --identity-teal: #2F8C84; --identity-plum: #8A5A86; --identity-ochre: #C29327; --identity-sage: #6E8F5A; --identity-denim: #4A6D9C; --identity-rose: #C45D7C; --identity-rust: #A8533A; --identity-pine: #3C7A63; --identity-slate: #6B6F7A; /* ======================================================== SEMANTIC ALIASES — LIGHT (default) ======================================================== */ --bg-canvas: var(--stone-25); --bg-surface: var(--stone-0); --bg-subtle: var(--stone-50); --bg-sunken: var(--stone-100); --bg-inset: var(--stone-150); --border-subtle: var(--stone-150); --border-default: var(--stone-200); --border-strong: var(--stone-300); --text-primary: var(--stone-900); --text-secondary: var(--stone-600); --text-tertiary: var(--stone-500); --text-disabled: var(--stone-400); --text-on-accent: #FFFFFF; --text-link: var(--flare-600); --accent: var(--flare-500); --accent-hover: var(--flare-600); --accent-press: var(--flare-700); --accent-subtle: var(--flare-50); --accent-border: var(--flare-200); --accent-text: var(--flare-700); --focus-ring: color-mix(in oklch, var(--flare-500) 55%, transparent); /* Status — surface/foreground pairs */ --status-open: var(--flare-500); --status-open-fg: var(--flare-700); --status-open-bg: var(--flare-50); --status-resolved: var(--go-500); --status-resolved-fg: var(--go-700); --status-resolved-bg: var(--go-50); --status-orphaned: var(--slate-500); --status-orphaned-fg: var(--slate-600); --status-orphaned-bg: var(--slate-100); --status-pending: var(--amber-500); --status-pending-fg: var(--amber-600); --status-pending-bg: var(--amber-50); /* Pin contrast treatment — legible on ANY captured background */ --pin-ring: #FFFFFF; /* inner ring / halo */ --pin-ring-width: 2.5px; --pin-halo: rgba(0,0,0,0.18); /* outer soft halo */ /* Selection */ --selection-bg: var(--flare-100); --selection-fg: var(--stone-900); } /* ======================================================== SEMANTIC ALIASES — DARK (the review chrome) Calm, near-neutral charcoal so arbitrary site palettes pop. ======================================================== */ [data-theme="dark"] { --bg-canvas: var(--stone-950); --bg-surface: var(--stone-900); --bg-subtle: var(--stone-850); --bg-sunken: var(--stone-950); --bg-inset: var(--stone-800); --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); --text-primary: var(--stone-50); --text-secondary: var(--stone-300); --text-tertiary: var(--stone-400); --text-disabled: var(--stone-600); --text-on-accent: #FFFFFF; --text-link: var(--flare-300); --accent: var(--flare-500); --accent-hover: var(--flare-400); --accent-press: var(--flare-600); --accent-subtle: color-mix(in oklch, var(--flare-500) 16%, var(--stone-900)); --accent-border: color-mix(in oklch, var(--flare-500) 38%, transparent); --accent-text: var(--flare-300); --focus-ring: color-mix(in oklch, var(--flare-400) 60%, transparent); --status-open: var(--flare-400); --status-open-fg: var(--flare-300); --status-open-bg: color-mix(in oklch, var(--flare-500) 18%, var(--stone-900)); --status-resolved: var(--go-400); --status-resolved-fg: var(--go-300); --status-resolved-bg: color-mix(in oklch, var(--go-500) 20%, var(--stone-900)); --status-orphaned: var(--slate-400); --status-orphaned-fg: var(--slate-300); --status-orphaned-bg: color-mix(in oklch, var(--slate-500) 22%, var(--stone-900)); --status-pending: var(--amber-500); --status-pending-fg: var(--amber-300); --status-pending-bg: color-mix(in oklch, var(--amber-500) 20%, var(--stone-900)); --pin-ring: #FFFFFF; --pin-halo: rgba(0,0,0,0.45); --selection-bg: color-mix(in oklch, var(--flare-500) 40%, transparent); --selection-fg: var(--stone-25); } /* ============================================================ comment.gg — Typography ------------------------------------------------------------ Hanken Grotesk for everything; JetBrains Mono at the dev edges. App UI base = 14px (dense pro tool). Marketing scales up. ============================================================ */ :root { /* ---- Families ------------------------------------------- */ --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---- Weights -------------------------------------------- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-display: 800; /* ---- Size scale ----------------------------------------- */ --text-2xs: 0.6875rem; /* 11px — micro labels, pin numbers */ --text-xs: 0.75rem; /* 12px — meta, timestamps, badges */ --text-sm: 0.8125rem; /* 13px — secondary UI, dense rows */ --text-base:0.875rem; /* 14px — app body / default */ --text-md: 0.9375rem; /* 15px — comfortable body */ --text-lg: 1.0625rem; /* 17px — lead paragraph */ --text-xl: 1.25rem; /* 20px — card titles */ --text-2xl: 1.5rem; /* 24px — section headings */ --text-3xl: 1.875rem; /* 30px — sub-hero */ --text-4xl: 2.375rem; /* 38px — page titles */ --text-5xl: 3rem; /* 48px — hero */ --text-6xl: 3.75rem; /* 60px — big hero */ --text-7xl: 4.75rem; /* 76px — display / marquee */ /* ---- Line heights --------------------------------------- */ --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; /* ---- Letter spacing ------------------------------------- */ --tracking-tighter: -0.03em; /* big display */ --tracking-tight: -0.015em; /* headings */ --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.06em; /* eyebrows / overline caps */ --tracking-mono: -0.01em; /* ---- Semantic type ramps (size · leading · weight · track) Use together via the documented combos in the type cards. */ --type-display-size: var(--text-7xl); --type-h1-size: var(--text-5xl); --type-h2-size: var(--text-3xl); --type-h3-size: var(--text-2xl); --type-title-size: var(--text-xl); --type-body-size: var(--text-md); --type-ui-size: var(--text-base); --type-meta-size: var(--text-xs); --type-overline-size: var(--text-xs); } /* Sensible element defaults — opt-in by importing this layer. */ body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; } code, kbd, samp, pre { font-family: var(--font-mono); font-feature-settings: "zero"; } ::selection { background: var(--selection-bg); color: var(--selection-fg); } /* ============================================================ comment.gg — Spacing, Radii, Sizing ------------------------------------------------------------ 4px base grid. Radii stay modest — calm chrome, not bubbly. ============================================================ */ :root { /* ---- Spacing scale (4px base) --------------------------- */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2 */ --space-1: 0.25rem; /* 4 */ --space-1-5: 0.375rem; /* 6 */ --space-2: 0.5rem; /* 8 */ --space-2-5: 0.625rem; /* 10 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ /* ---- Radii ---------------------------------------------- */ --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px; /* default control radius */ --radius-lg: 11px; /* cards */ --radius-xl: 16px; /* panels / dialogs */ --radius-2xl: 22px; /* marketing surfaces */ --radius-pill: 999px; --radius-full: 9999px; /* ---- Border widths -------------------------------------- */ --border-hairline: 1px; --border-thick: 1.5px; --border-heavy: 2px; /* ---- Control heights (dense pro tool) ------------------- */ --control-sm: 28px; --control-md: 34px; --control-lg: 42px; /* ---- Layout ---------------------------------------------- */ --sidebar-width: 340px; --topbar-height: 52px; --container-prose: 680px; --container-narrow: 920px; --container-wide: 1200px; --container-max: 1320px; /* ---- Pin sizing ----------------------------------------- */ --pin-size: 26px; /* dot diameter */ --pin-size-sm: 20px; } /* ============================================================ comment.gg — Elevation & Borders ------------------------------------------------------------ Low, warm-tinted shadows. The review chrome stays flat; elevation is reserved for things that float ABOVE the captured site (pins, popovers, dialogs, toasts). ============================================================ */ :root { /* Warm-tinted shadow color (not pure black) */ --shadow-color: 30 25% 12%; --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.06); --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.06), 0 2px 6px hsl(var(--shadow-color) / 0.06); --shadow-md: 0 2px 4px hsl(var(--shadow-color) / 0.06), 0 6px 16px hsl(var(--shadow-color) / 0.10); --shadow-lg: 0 4px 8px hsl(var(--shadow-color) / 0.07), 0 12px 32px hsl(var(--shadow-color) / 0.13); --shadow-xl: 0 8px 16px hsl(var(--shadow-color) / 0.08), 0 24px 56px hsl(var(--shadow-color) / 0.18); /* Focus ring (paired with --focus-ring color token) */ --ring-focus: 0 0 0 3px var(--focus-ring); --ring-inset-hair: inset 0 0 0 1px var(--border-default); /* ---- Pin elevation — must read on ANY background -------- White ring + colored fill (set per-status) + soft halo. */ --pin-shadow: 0 0 0 var(--pin-ring-width) var(--pin-ring), 0 2px 5px var(--pin-halo), 0 0 0 4.5px var(--pin-halo); --pin-shadow-active: 0 0 0 var(--pin-ring-width) var(--pin-ring), 0 3px 10px var(--pin-halo), 0 0 0 6px color-mix(in oklch, var(--accent) 30%, transparent); } [data-theme="dark"] { --shadow-color: 0 0% 0%; --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.30), 0 2px 6px hsl(var(--shadow-color) / 0.24); --shadow-md: 0 2px 4px hsl(var(--shadow-color) / 0.30), 0 6px 16px hsl(var(--shadow-color) / 0.34); --shadow-lg: 0 4px 8px hsl(var(--shadow-color) / 0.34), 0 12px 32px hsl(var(--shadow-color) / 0.46); --shadow-xl: 0 8px 16px hsl(var(--shadow-color) / 0.40), 0 24px 56px hsl(var(--shadow-color) / 0.55); } /* ============================================================ comment.gg — Motion ------------------------------------------------------------ Calm and quick. Fades and small slides; no bounce in chrome. The ONE exception is the "GG" celebration, which gets a single, gentle spring (--ease-spring) and lives nowhere else. ============================================================ */ :root { /* ---- Durations ------------------------------------------ */ --duration-instant: 80ms; /* @kind other */ --duration-fast: 120ms; /* @kind other */ --duration-base: 180ms; /* @kind other */ --duration-slow: 260ms; /* @kind other */ --duration-slower: 400ms; /* @kind other */ --duration-celebrate: 900ms; /* @kind other */ /* ---- Easings -------------------------------------------- */ /* standard = most UI */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ /* out = enters */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ /* in = exits */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */ /* spring = the GG moment, nowhere else */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* ---- Common composites ---------------------------------- */ --transition-colors: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); --transition-transform: transform var(--duration-base) var(--ease-standard); } @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; /* @kind other */ --duration-fast: 0ms; /* @kind other */ --duration-base: 0ms; /* @kind other */ --duration-slow: 0ms; /* @kind other */ --duration-slower: 0ms; /* @kind other */ --duration-celebrate: 0ms; /* @kind other */ } }