/* * 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); }