/* * ROLLerUP Brand Tokens — canonical CSS custom properties. * Source of truth: .claude/skills/rollerup-brand/SKILL.md * Zoho-aligned. Apply to every rollerup/ project. */ :root { /* ---- Surfaces & text ---- */ --ru-bg: #FFFFFF; --ru-bg-page: #FAFAFA; --ru-bg-inverse: #2D3133; --ru-text: #000000; --ru-text-secondary: #5B5F61; --ru-text-tertiary: #818487; --ru-text-disabled: #C4C7CA; --ru-text-oninverse: #FFFFFF; --ru-border: #DBDDE0; /* ---- Brand (Blue — Zoho CRM/Desk family) ---- */ --ru-brand: #2A81F9; --ru-brand-hover: #2968C6; --ru-brand-pressed: #335DA4; --ru-brand-border: #CFDDFF; --ru-brand-bg-tint: #EEF4FF; /* ---- Semantic / status ---- */ --ru-success: #029934; --ru-success-border: #18FBB1; --ru-danger: #F04340; --ru-danger-border: #FFD3CE; --ru-warning: #CF6700; --ru-warning-border: #FFD4BA; --ru-info: #2A81F9; --ru-info-border: #CFDDFF; /* ---- Radius ---- */ --ru-radius-sm: 2px; --ru-radius: 4px; --ru-radius-lg: 6px; --ru-radius-xl: 8px; /* ---- Spacing (4px base) ---- */ --ru-space-1: 4px; --ru-space-2: 8px; --ru-space-3: 16px; --ru-space-4: 20px; --ru-space-5: 24px; --ru-space-6: 32px; --ru-space-7: 40px; --ru-space-8: 48px; --ru-space-9: 64px; --ru-space-10: 80px; /* ---- Elevation (overlays + marketing only) ---- */ --ru-shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --ru-shadow-popover: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06); --ru-shadow-modal: 0 24px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08); /* ---- Focus ring ---- */ --ru-focus-ring: 0 0 0 2px rgba(42,129,249,0.30); /* ---- Typography ---- */ --ru-font-sans: puvi, 'roboto flex', roboto, lato, inter, system-ui, -apple-system, sans-serif; --ru-font-mono: 'sf mono', 'jetbrains mono', 'zoho puvi mono', monospace; --ru-font-small: 0.75rem; /* 12px */ --ru-font-medium: 0.875rem; /* 14px — body default */ --ru-font-large: 1rem; /* 16px */ --ru-font-xlarge: 1.5rem; /* 24px */ } /* Base element styling */ body { margin: 0; font-family: var(--ru-font-sans); font-size: var(--ru-font-medium); line-height: 1.5; letter-spacing: -0.01em; color: var(--ru-text); background: var(--ru-bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--ru-font-sans); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--ru-text); margin: 0 0 var(--ru-space-3); } h1 { font-size: clamp(2rem, 3vw, 3rem); font-weight: 700; } h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); } h3 { font-size: 1.5rem; } h4 { font-size: 1.125rem; } a { color: var(--ru-brand); text-decoration: none; } a:hover { text-decoration: underline; } code, pre, kbd, samp { font-family: var(--ru-font-mono); } /* ---- Dark theme ---- */ /* Apply or for admin / internal surfaces. */ [data-theme="dark"] { --ru-bg: #1A1F2E; --ru-bg-page: #0A0E17; --ru-bg-inverse: #FFFFFF; --ru-text: #E8EAEB; --ru-text-secondary: #9CA3AF; --ru-text-tertiary: #6B7280; --ru-text-disabled: #4B5563; --ru-text-oninverse: #000000; --ru-border: #2D3748; --ru-brand: #4D97FA; --ru-brand-hover: #66A8FB; --ru-brand-pressed: #2A81F9; --ru-brand-border: #1E3A5F; --ru-brand-bg-tint: rgba(77,151,250,0.15); --ru-success: #18FBB1; --ru-danger: #FF6B68; --ru-warning: #F59E0B; --ru-info: #4D97FA; --ru-focus-ring: 0 0 0 2px rgba(77,151,250,0.40); --ru-shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --ru-shadow-popover: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4); --ru-shadow-modal: 0 24px 48px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.5); } /* --------------------------------------------------------------- Tag category accents (board only) — data-viz sequence per SKILL.md §1.4 "categorical sequence only". NOT brand tokens — purple/cyan/pink are LOCAL to the Ideas Inbox tag chips and must not be reused as UI accents. Use var(--ru-tag-*) only inside .ru-tag-chip rules / the legend. --------------------------------------------------------------- */ :root { --ru-tag-kb: var(--ru-success); --ru-tag-assistant: #2A81F9; --ru-tag-marketforge: #9E7BFF; --ru-tag-bookkeeper: #22D3EE; --ru-tag-centcom: #F97316; --ru-tag-cashflow: #10B981; --ru-tag-fsm: #F59E0B; --ru-tag-hr: #EC4899; --ru-tag-mgmt: #8B5CF6; --ru-tag-pricing: #14B8A6; --ru-tag-chat: #06B6D4; --ru-tag-voice: #6366F1; --ru-tag-raffle: var(--ru-warning); --ru-tag-travel: #84CC16; --ru-tag-personal: var(--ru-text-secondary); --ru-tag-other: var(--ru-border); --ru-tag-untagged: var(--ru-text-tertiary); } [data-theme="dark"] { --ru-tag-assistant: #60A5FA; --ru-tag-marketforge: #B69CFF; --ru-tag-bookkeeper: #67E8F9; --ru-tag-centcom: #FB923C; --ru-tag-cashflow: #34D399; --ru-tag-mgmt: #A78BFA; --ru-tag-pricing: #2DD4BF; --ru-tag-chat: #22D3EE; --ru-tag-voice: #818CF8; --ru-tag-travel: #A3E635; } /* --------------------------------------------------------------- Board primitives — chips, cards, buttons. All tokens; min 44x44 touch targets per CONTEXT.md specifics (mobile first). --------------------------------------------------------------- */ .ru-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--ru-radius-sm); font-size: var(--ru-font-small); font-weight: 500; background: var(--ru-bg-page); border: 1px solid var(--ru-border); color: var(--ru-text-secondary); line-height: 1.4; } .ru-chip--active { background: var(--ru-brand-bg-tint); border-color: var(--ru-brand); color: var(--ru-brand); } .ru-card { background: var(--ru-bg); border: 1px solid var(--ru-border); border-radius: var(--ru-radius-lg); padding: var(--ru-space-3); display: flex; flex-direction: column; gap: var(--ru-space-2); } .ru-btn { min-height: 44px; min-width: 44px; padding: 8px 16px; font-family: var(--ru-font-sans); font-size: var(--ru-font-medium); font-weight: 500; color: var(--ru-text); background: var(--ru-bg); border: 1px solid var(--ru-border); border-radius: var(--ru-radius); cursor: pointer; letter-spacing: -0.01em; } .ru-btn:hover { background: var(--ru-brand-bg-tint); border-color: var(--ru-brand); } .ru-btn:focus { outline: none; box-shadow: var(--ru-focus-ring); } .ru-btn-primary { color: var(--ru-text-oninverse); background: var(--ru-brand); border-color: var(--ru-brand); } .ru-btn-primary:hover { background: var(--ru-brand-hover); border-color: var(--ru-brand-hover); } .ru-tag-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; } /* --------------------------------------------------------------- Dashboard layout (03-02) — /dashboard admin surface. Classes only; every color/radius uses existing tokens. No new colors, no hex codes. Responsive: 1 / 2 / 3 columns. --------------------------------------------------------------- */ .ru-dash-wrap { max-width: 1200px; margin: 0 auto; padding: var(--ru-space-5); } .ru-dash-grid { display: grid; gap: var(--ru-space-4); grid-template-columns: 1fr; margin-top: var(--ru-space-4); } @media (min-width: 900px) { .ru-dash-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1280px) { .ru-dash-grid { grid-template-columns: repeat(3, 1fr); } } .ru-dash-card { background: var(--ru-bg); border: 1px solid var(--ru-border); border-radius: var(--ru-radius-lg); padding: var(--ru-space-4); } .ru-dash-h2 { font-size: var(--ru-font-xlarge); margin: 0 0 var(--ru-space-2); color: var(--ru-text); letter-spacing: -0.025em; font-weight: 700; } .ru-dash-h3 { font-size: var(--ru-font-large); margin: 0 0 var(--ru-space-3); color: var(--ru-text); font-weight: 600; } .ru-dash-meta { display: flex; flex-wrap: wrap; gap: var(--ru-space-3); color: var(--ru-text-secondary); font-size: var(--ru-font-small); align-items: center; } .ru-dash-muted { color: var(--ru-text-tertiary); } .ru-dash-note { font-size: var(--ru-font-small); margin-top: var(--ru-space-2); margin-bottom: 0; } .ru-dash-table { width: 100%; border-collapse: collapse; font-size: var(--ru-font-small); } .ru-dash-table th, .ru-dash-table td { text-align: left; padding: var(--ru-space-2) var(--ru-space-3); border-bottom: 1px solid var(--ru-border); } .ru-dash-table th { background: var(--ru-bg-page); color: var(--ru-text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--ru-font-small); } .ru-dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--ru-space-3); margin: 0; } .ru-dash-stats > div { display: flex; flex-direction: column; gap: var(--ru-space-1); } .ru-dash-stats dt { color: var(--ru-text-tertiary); font-size: var(--ru-font-small); text-transform: uppercase; letter-spacing: 0.04em; } .ru-dash-stats dd { margin: 0; color: var(--ru-text); font-size: var(--ru-font-large); font-weight: 600; } .ru-dash-conn, .ru-dash-activity, .ru-dash-blockers { list-style: none; padding: 0; margin: 0; } .ru-dash-conn-row, .ru-dash-activity > li, .ru-dash-blockers > li { display: flex; align-items: center; gap: var(--ru-space-3); padding: var(--ru-space-2) 0; border-bottom: 1px solid var(--ru-border); font-size: var(--ru-font-small); color: var(--ru-text); flex-wrap: wrap; } .ru-dash-conn-row:last-child, .ru-dash-activity > li:last-child, .ru-dash-blockers > li:last-child { border-bottom: none; } .ru-dash-conn-name { min-width: 120px; font-weight: 600; } .ru-dash-conn-icon { width: 20px; text-align: center; } .ru-dash-conn-ts { margin-left: auto; } .ru-dash-sha { color: var(--ru-text-secondary); font-family: var(--ru-font-mono); } .ru-dash-msg { color: var(--ru-text); } .ru-dash-blocker-item { flex: 1; } .ru-chip-success { background: var(--ru-bg-page); border-color: var(--ru-success-border); color: var(--ru-success); } .ru-chip-info { background: var(--ru-brand-bg-tint); border-color: var(--ru-brand-border); color: var(--ru-brand); } .ru-dash-footer-status { margin-top: var(--ru-space-4); font-size: var(--ru-font-small); text-align: center; }