/* ============================================================= Pipese Design Tokens Source of truth for color, type, space, radius, shadow, motion. Light + Dark modes. Activate dark mode with `class="dark"` on . ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ---------- BRAND ---------- */ --pipese-red: #FF4957; /* sampled from the wordmark */ --pipese-red-600: #E63E4B; /* hover for the brand red */ --pipese-red-700: #C72F3B; /* pressed */ --pipese-red-200: #FFC8CD; /* tinted background */ --pipese-red-100: #FFE5E8; /* faint tint */ --pipese-red-50: #FFF4F5; /* Secondary brand accents (used in kanban + login glow). Use sparingly. */ --pipese-coral: #FF7A59; --pipese-pink: #FF5AA5; --pipese-indigo: #5745FF; /* "Aberto" emphasis */ /* ---------- NEUTRALS (LIGHT) ---------- */ --neutral-0: #FFFFFF; --neutral-50: #FBFBFD; --neutral-100: #F4F5F7; --neutral-150: #ECEEF1; --neutral-200: #E4E7EC; --neutral-300: #D0D5DD; --neutral-400: #98A2B3; --neutral-500: #667085; --neutral-600: #475467; --neutral-700: #344054; --neutral-800: #1D2939; --neutral-900: #101828; --neutral-950: #0B1220; /* ---------- SEMANTIC SURFACES (LIGHT — defaults) ---------- */ --bg-app: #F5F6F8; /* page background */ --bg-canvas: var(--neutral-50); /* sub-section bg, kanban surface-2 */ --surface: var(--neutral-0); --surface-2: var(--neutral-50); --surface-sunken: var(--neutral-100); --surface-hover: var(--neutral-100); --border: var(--neutral-200); --border-strong: var(--neutral-300); --border-subtle: var(--neutral-150); --text: var(--neutral-900); --text-muted: var(--neutral-500); --text-subtle: var(--neutral-400); --text-inverse: var(--neutral-0); --text-link: var(--pipese-red-600); /* ---------- STATUS PALETTE ---------- Each status has: bg (row tint), text (high-contrast), badge-bg, badge-text, dot These map 1:1 to CRM business states. NEVER reuse for unrelated meaning. */ /* Aberto — open / in progress */ --status-aberto-bg: #EEF0FF; --status-aberto-text: #2E2A8A; --status-aberto-badge-bg: var(--pipese-indigo); --status-aberto-badge-text:#FFFFFF; --status-aberto-dot: var(--pipese-indigo); /* Ganho — won */ --status-ganho-bg: #DCFCE7; --status-ganho-text: #0F6B2F; --status-ganho-badge-bg: #28A745; --status-ganho-badge-text: #FFFFFF; --status-ganho-dot: #22C55E; /* Perdido — lost */ --status-perdido-bg: #FFE4E4; --status-perdido-text: #6B0F0F; --status-perdido-badge-bg: #B30000; --status-perdido-badge-text:#FFFFFF; --status-perdido-dot: #EF4444; /* Mesclado — merged */ --status-mesclado-bg: #F1F4F8; --status-mesclado-text: #475467; --status-mesclado-badge-bg:#475467; --status-mesclado-badge-text:#FFFFFF; --status-mesclado-dot: #98A2B3; /* Deletado — deleted */ --status-deletado-bg: #F3E8FF; --status-deletado-text: #5B21B6; --status-deletado-badge-bg:#8B5CF6; --status-deletado-badge-text:#FFFFFF; --status-deletado-dot: #A855F7; /* Sem atividades — no activity scheduled */ --status-sematividade-bg: #FEF9C3; --status-sematividade-text: #854D0E; --status-sematividade-badge-bg: #CA8A04; --status-sematividade-badge-text: #FFFFFF; --status-sematividade-dot: #EAB308; /* Estagnado — stalled, no recent movement */ --status-estagnado-bg: #FFF4A1; --status-estagnado-text: #8A6D00; --status-estagnado-badge-bg: #B7791F; --status-estagnado-badge-text:#FFFFFF; --status-estagnado-dot: #D97706; /* Vencido — overdue activity */ --status-vencido-bg: #FEE2E2; --status-vencido-text: #B91C1C; --status-vencido-badge-bg: #EF4444; --status-vencido-badge-text: #FFFFFF; --status-vencido-dot: #EF4444; /* Hoje (não vencido) — due today */ --status-hoje-bg: #FFFD9D; --status-hoje-text: #A16207; --status-hoje-badge-bg: #F59E0B; --status-hoje-badge-text: #FFFFFF; --status-hoje-dot: #F59E0B; /* Concluído — completed on time */ --status-concluido-bg: #BBF7D0; --status-concluido-text: #047857; --status-concluido-badge-bg: #28A745; --status-concluido-badge-text:#FFFFFF; --status-concluido-dot: #10B981; /* Concluído atrasado — completed late */ --status-concluido-atraso-bg: #EDE9FE; --status-concluido-atraso-text: #5B21B6; --status-concluido-atraso-badge-bg: #8B5CF6; --status-concluido-atraso-badge-text: #FFFFFF; --status-concluido-atraso-dot: #8B5CF6; /* Urgente — pulses. Reserved. */ --status-urgente-bg: #F87171; --status-urgente-text: #7F1D1D; --status-urgente-badge-bg: #DC2626; --status-urgente-badge-text: #FFFFFF; --status-urgente-dot: #DC2626; /* ---------- GENERIC SEMANTIC (use sparingly) ---------- */ --color-info: #3B82F6; --color-info-bg: #DBEAFE; --color-info-text: #1E40AF; --color-warn: #F59E0B; --color-warn-bg: #FEF3C7; --color-warn-text: #92400E; /* Chart palette (categorical — for dashboards). Order matters: keep 1-3 anchored. */ --chart-1: #3B82F6; /* Em aberto */ --chart-2: #10B981; /* Ganho */ --chart-3: #EF4444; /* Perdido */ --chart-4: #7E22CE; /* Valor mensal relativo */ --chart-5: #00E396; /* Valor de venda */ --chart-6: #F59E0B; --chart-7: #06B6D4; --chart-8: #EC4899; /* ---------- BUTTONS ---------- Primary is intentionally NEUTRAL DARK, not the brand red. Brand red is reserved for the urgent/heroic action only. */ --btn-primary-bg: #0E1420; --btn-primary-bg-hover: #1F2937; --btn-primary-text: #FFFFFF; --btn-secondary-bg: var(--surface); --btn-secondary-bg-hover:var(--surface-hover); --btn-secondary-text: var(--text); --btn-secondary-border: var(--border); --btn-brand-bg: var(--pipese-red); --btn-brand-bg-hover: var(--pipese-red-600); --btn-brand-text: #FFFFFF; /* ---------- TYPE ---------- */ --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --font-text: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale — fluid up to display sizes. CRM-density at the bottom. */ --text-xs: 11px; /* metadata, kanban-card meta */ --text-sm: 12px; /* table caption, footnote */ --text-base: 14px; /* default product body */ --text-md: 15px; /* slightly emphasized body */ --text-lg: 16px; /* card heading, marketing body */ --text-xl: 18px; --text-2xl: 20px; /* page section header */ --text-3xl: 24px; --text-4xl: 30px; /* page title */ --text-5xl: 36px; --text-display: 48px; /* dashboard hero number */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-base: 1.5; --leading-loose: 1.7; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-allcaps: 0.08em; --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; /* ---------- SPACING (4px grid) ---------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ---------- RADIUS ---------- */ --radius-xs: 4px; /* tags, badges */ --radius-sm: 6px; /* tight inputs */ --radius-md: 8px; /* buttons, default inputs */ --radius-lg: 12px; /* tiles, kanban handles */ --radius-xl: 14px; /* cards */ --radius-2xl: 18px; /* kanban column shells */ --radius-pill:999px; /* pills, dots */ /* ---------- SHADOWS (only two real levels) ---------- */ --shadow-none: 0 0 0 0 transparent; --shadow-soft: 0 2px 10px rgba(16, 24, 40, 0.06); --shadow-raised: 0 8px 22px rgba(16, 24, 40, 0.10); --shadow-overlay: 0 24px 48px rgba(16, 24, 40, 0.18); --shadow-focus: 0 0 0 3px rgba(255, 73, 87, 0.28); --shadow-focus-neutral: 0 0 0 3px rgba(16, 24, 40, 0.12); /* ---------- MOTION ---------- */ --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 320ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* ---------- LAYOUT TOKENS ---------- */ --sidebar-w: 260px; --sidebar-w-collapsed: 64px; --topbar-h: 60px; --kanban-col-w: 320px; --kanban-gap: 12px; --container-md: 960px; --container-lg: 1280px; --container-xl: 1440px; } /* ============================================================= DARK MODE — toggled by class="dark" on Mirrors the Pipese kanban dark palette (slate + navy). ============================================================= */ .dark { --bg-app: #0B1220; --bg-canvas: #0F172A; --surface: #111C33; --surface-2: #0F172A; --surface-sunken: #0A1020; --surface-hover: #16223D; --border: rgba(148, 163, 184, 0.18); --border-strong: rgba(148, 163, 184, 0.32); --border-subtle: rgba(148, 163, 184, 0.10); --text: #E5E7EB; --text-muted: #A0AEC0; --text-subtle: #64748B; --text-inverse: #0B1220; --text-link: #FF7A89; /* Status — darker bgs, lighter text */ --status-aberto-bg: rgba(87, 69, 255, 0.18); --status-aberto-text: #C7C0FF; --status-ganho-bg: rgba(34, 197, 94, 0.16); --status-ganho-text: #9DFFBF; --status-perdido-bg: rgba(239, 68, 68, 0.16); --status-perdido-text: #FF9D9D; --status-mesclado-bg: rgba(148, 163, 184, 0.12); --status-mesclado-text: #CBD5E1; --status-deletado-bg: rgba(168, 85, 247, 0.16); --status-deletado-text: #DDD0FF; --status-sematividade-bg: rgba(234, 179, 8, 0.18); --status-sematividade-text: #FCD34D; --status-estagnado-bg: rgba(217, 119, 6, 0.18); --status-estagnado-text: #FFE08A; --status-vencido-bg: rgba(127, 29, 29, 0.45); --status-vencido-text: #FCA5A5; --status-hoje-bg: rgba(245, 158, 11, 0.20); --status-hoje-text: #FCD34D; --status-concluido-bg: rgba(6, 78, 59, 0.55); --status-concluido-text: #A7F3D0; --status-concluido-atraso-bg: rgba(139, 92, 246, 0.18); --status-concluido-atraso-text: #DDD0FF; --status-urgente-bg: rgba(127, 29, 29, 0.85); --status-urgente-text: #FCA5A5; --color-info-bg: rgba(59, 130, 246, 0.18); --color-info-text: #93C5FD; --color-warn-bg: rgba(245, 158, 11, 0.18); --color-warn-text: #FCD34D; /* Buttons */ --btn-primary-bg: #F4F5F7; --btn-primary-bg-hover: #FFFFFF; --btn-primary-text: #0B1220; --btn-secondary-bg: transparent; --btn-secondary-bg-hover:rgba(255,255,255,0.04); --btn-secondary-text: var(--text); --btn-secondary-border: var(--border); /* Shadows tuned for dark surfaces */ --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.30); --shadow-raised: 0 12px 26px rgba(0, 0, 0, 0.50); --shadow-overlay: 0 24px 48px rgba(0, 0, 0, 0.65); --shadow-focus: 0 0 0 3px rgba(255, 122, 137, 0.35); } /* Tabular numerals on anything money-ish or count-ish */ .num, td.num, .kanban-card__values, .badge, .pipese-pill, .stat-value { font-variant-numeric: tabular-nums; } /* ============================================================= UTILITY PRIMITIVES — small, reusable classes used by previews and by in-product components. Not a full utility framework. ============================================================= */ /* Type roles */ .eyebrow { font-family: var(--font-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-allcaps); text-transform: uppercase; color: var(--text-muted); } .section-title { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--text); } .body-muted { color: var(--text-muted); } /* Cards */ .pipese-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); padding: var(--space-5); } /* Buttons */ .pipese-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: 1; border: 1px solid transparent; cursor: pointer; transition: background var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-base) var(--ease-out); user-select: none; white-space: nowrap; } .pipese-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus-neutral); } .pipese-btn:active { transform: translateY(1px); } .pipese-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); } .pipese-btn--primary:hover { background: var(--btn-primary-bg-hover); } .pipese-btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-secondary-border); } .pipese-btn--secondary:hover { background: var(--btn-secondary-bg-hover); } .pipese-btn--brand { background: var(--btn-brand-bg); color: var(--btn-brand-text); } .pipese-btn--brand:hover { background: var(--btn-brand-bg-hover); } .pipese-btn--brand:focus-visible { box-shadow: var(--shadow-focus); } .pipese-btn--ghost { background: transparent; color: var(--text); } .pipese-btn--ghost:hover { background: var(--surface-hover); } .pipese-btn--danger { background: #DC2626; color: #FFFFFF; } .pipese-btn--danger:hover { background: #B91C1C; } .pipese-btn--sm { height: 28px; padding: 0 var(--space-3); font-size: var(--text-sm); } .pipese-btn--lg { height: 44px; padding: 0 var(--space-5); font-size: var(--text-md); } /* Inputs */ .pipese-input { height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font-sans); font-size: var(--text-base); transition: border-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out); width: 100%; } .pipese-input::placeholder { color: var(--text-subtle); } .pipese-input:hover { border-color: var(--border-strong); } .pipese-input:focus { outline: none; border-color: var(--text); box-shadow: var(--shadow-focus-neutral); } /* Status pill — drives every CRM badge */ .pipese-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--radius-xs); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1.2; letter-spacing: var(--tracking-snug); white-space: nowrap; vertical-align: baseline; } .pipese-pill--soft { /* soft variant uses semi-transparent bg + colored text */ border: 1px solid transparent; } .pipese-pill--solid { color: #FFFFFF; } .pipese-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } /* Status mappings */ .pill-aberto.pipese-pill--solid { background: var(--status-aberto-badge-bg); color: var(--status-aberto-badge-text); } .pill-aberto.pipese-pill--soft { background: var(--status-aberto-bg); color: var(--status-aberto-text); } .pill-ganho.pipese-pill--solid { background: var(--status-ganho-badge-bg); color: var(--status-ganho-badge-text); } .pill-ganho.pipese-pill--soft { background: var(--status-ganho-bg); color: var(--status-ganho-text); } .pill-perdido.pipese-pill--solid { background: var(--status-perdido-badge-bg); color: var(--status-perdido-badge-text); } .pill-perdido.pipese-pill--soft { background: var(--status-perdido-bg); color: var(--status-perdido-text); } .pill-mesclado.pipese-pill--solid { background: var(--status-mesclado-badge-bg); color: var(--status-mesclado-badge-text); } .pill-mesclado.pipese-pill--soft { background: var(--status-mesclado-bg); color: var(--status-mesclado-text); } .pill-deletado.pipese-pill--solid { background: var(--status-deletado-badge-bg); color: var(--status-deletado-badge-text); } .pill-deletado.pipese-pill--soft { background: var(--status-deletado-bg); color: var(--status-deletado-text); } .pill-sematividade.pipese-pill--solid { background: var(--status-sematividade-badge-bg); color: var(--status-sematividade-badge-text); } .pill-sematividade.pipese-pill--soft { background: var(--status-sematividade-bg); color: var(--status-sematividade-text); } .pill-estagnado.pipese-pill--solid { background: var(--status-estagnado-badge-bg);color: var(--status-estagnado-badge-text); } .pill-estagnado.pipese-pill--soft { background: var(--status-estagnado-bg); color: var(--status-estagnado-text); } .pill-vencido.pipese-pill--solid { background: var(--status-vencido-badge-bg); color: var(--status-vencido-badge-text); } .pill-vencido.pipese-pill--soft { background: var(--status-vencido-bg); color: var(--status-vencido-text); } .pill-hoje.pipese-pill--solid { background: var(--status-hoje-badge-bg); color: var(--status-hoje-badge-text); } .pill-hoje.pipese-pill--soft { background: var(--status-hoje-bg); color: var(--status-hoje-text); } .pill-concluido.pipese-pill--solid { background: var(--status-concluido-badge-bg);color: var(--status-concluido-badge-text); } .pill-concluido.pipese-pill--soft { background: var(--status-concluido-bg); color: var(--status-concluido-text); } .pill-concluido-atraso.pipese-pill--solid { background: var(--status-concluido-atraso-badge-bg); color: var(--status-concluido-atraso-badge-text); } .pill-concluido-atraso.pipese-pill--soft { background: var(--status-concluido-atraso-bg); color: var(--status-concluido-atraso-text); } .pill-urgente.pipese-pill--solid { background: var(--status-urgente-badge-bg); color: var(--status-urgente-badge-text); animation: pipese-blink 1s linear infinite; } .pill-urgente.pipese-pill--soft { background: var(--status-urgente-bg); color: var(--status-urgente-text); animation: pipese-blink 1s linear infinite; } @keyframes pipese-blink { 50% { opacity: 0.45; } } /* Status row tinting (for tables) */ .row-aberto { background: var(--status-aberto-bg); color: var(--status-aberto-text); } .row-ganho { background: var(--status-ganho-bg); color: var(--status-ganho-text); } .row-perdido { background: var(--status-perdido-bg); color: var(--status-perdido-text); } .row-mesclado { background: var(--status-mesclado-bg); color: var(--status-mesclado-text); } .row-deletado { background: var(--status-deletado-bg); color: var(--status-deletado-text); } .row-vencido { background: var(--status-vencido-bg); color: var(--status-vencido-text); } .row-hoje { background: var(--status-hoje-bg); color: var(--status-hoje-text); } .row-concluido { background: var(--status-concluido-bg); color: var(--status-concluido-text); } .row-sematividade { background: var(--status-sematividade-bg); color: var(--status-sematividade-text); } .row-estagnado { background: var(--status-estagnado-bg); color: var(--status-estagnado-text); } /* Status row left-bar (Tailwind `.deal-status-row` echo) */ .bar-row { border-left: 4px solid transparent; padding-left: var(--space-3); transition: background var(--motion-base) var(--ease-out); } .bar-row--aberto { border-color: var(--status-aberto-dot); } .bar-row--ganho { border-color: var(--status-ganho-dot); } .bar-row--perdido { border-color: var(--status-perdido-dot); } .bar-row--mesclado { border-color: var(--status-mesclado-dot); } .bar-row--deletado { border-color: var(--status-deletado-dot); } /* Skip-link / a11y */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }