/* V2 Design Tokens — extracted from Claude Design share on 2026-05-13 */ /* Source: https://claude.ai/design/p/019e0389-6e16-7b32-8a5a-2f572263c1d4 (IA Meu Atendente.html) */ /* Method: DevTools getComputedStyle() walk over iframe DOM. */ /* Do not edit by hand — re-extract via Phase 0.5 plan if design changes upstream. */ /* Fonts (Inter + JetBrains Mono) are loaded via in the HTML of each V2 page — pre-discoverable by the preload scanner. Loading them here via @import forced a serial waterfall (parse this CSS → fetch Inter CSS → fetch Mono CSS → parse) that blocked first paint by ~200-500ms per navigation. The HTML path achieves the same result without the waterfall. */ /* Cross-document view transitions for smoother navigation between V2 admin pages. Progressive enhancement: browsers without support (Safari <18, Firefox, older Chrome) ignore this rule silently and fall back to the standard full-page reload. Modern Chromium ≥126 and Safari ≥18 will fade the next document in instead of flashing white. */ @view-transition { navigation: auto; } /* General Sans — self-hosted (Fontshare). Variable axis covers weights 200–700. */ @font-face { font-family: 'General Sans'; src: url('/admin/fonts/general-sans/GeneralSans-Variable.woff2') format('woff2'); font-weight: 200 700; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('/admin/fonts/general-sans/GeneralSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('/admin/fonts/general-sans/GeneralSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('/admin/fonts/general-sans/GeneralSans-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('/admin/fonts/general-sans/GeneralSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ─── Neutrals ─────────────────────────────────────── */ --ds-n-0: #ffffff; --ds-n-25: #fbfbfc; --ds-n-50: #f6f7f9; --ds-n-100: #eceef2; --ds-n-150: #e1e4ea; --ds-n-200: #d3d7df; --ds-n-300: #b8bdc8; --ds-n-400: #8b919e; --ds-n-500: #656b78; --ds-n-600: #4a4f5a; --ds-n-700: #353944; --ds-n-800: #23262e; --ds-n-850: #1a1c22; --ds-n-900: #121419; --ds-n-950: #0a0b0e; /* ─── Surfaces & Text ─────────────────────────────── */ --ds-canvas: #f6f7f9; --ds-surface: #ffffff; --ds-border: #e1e4ea; --ds-border-soft: #f0f1f4; --ds-border-strong: #d3d7df; --ds-text: #121419; --ds-text-muted: #656b78; --ds-text-subtle: #8b919e; /* ─── Accent ──────────────────────────────────────── */ --ds-accent: #1d6c5c; --ds-accent-fg: #0c3a32; --ds-accent-hover: #185a4d; --ds-accent-soft: #e6f1ee; --ds-accent-rgb: 31, 138, 91; /* ─── Semantic ────────────────────────────────────── */ --ds-info: #2563eb; --ds-info-fg: #1e3a8a; --ds-info-bg: #eff6ff; --ds-success: #16a34a; --ds-success-fg: #14532d; --ds-success-bg: #ecfdf3; --ds-warning: #d97706; --ds-warning-fg: #7c2d12; --ds-warning-bg: #fff7ed; --ds-danger: #dc2626; --ds-danger-fg: #7f1d1d; --ds-danger-bg: #fef2f2; --ds-amber: #d97706; /* ─── Sidebar ─────────────────────────────────────── */ --ds-sb-bg: #121419; --ds-sb-bg-hover: rgba(255, 255, 255, 0.06); --ds-sb-bg-active: rgba(255, 255, 255, 0.08); --ds-sb-border: rgba(255, 255, 255, 0.08); --ds-sb-text: rgba(255, 255, 255, 0.82); /* Bumped from 0.45 → 0.62 for ~6.5:1 contrast against #121419 — clears AA-normal comfortably even at the 10.5–11px sizes used by `.ds-sb-section` and `.ds-sb-tenant-plan`. */ --ds-sb-text-muted: rgba(255, 255, 255, 0.62); --ds-sb-text-active: #ffffff; --ds-sb-accent: #1d6c5c; /* ─── Badges ──────────────────────────────────────── */ --ds-badge-ia-bg: #ecfdf5; --ds-badge-ia-fg: #166534; --ds-badge-ia-dot: #10b981; --ds-badge-aguardando-bg: #fff1ec; --ds-badge-aguardando-fg: #b3431a; --ds-badge-aguardando-dot: #ea580c; --ds-badge-convertido-bg: #eef2ff; --ds-badge-convertido-fg: #3730a3; --ds-badge-convertido-dot: #6366f1; --ds-badge-parado-bg: #f3f4f6; --ds-badge-parado-fg: #4b5563; --ds-badge-parado-dot: #9ca3af; --ds-badge-encerrado-bg: #f3f4f6; --ds-badge-encerrado-fg: #111827; --ds-badge-encerrado-dot: #374151; /* ─── Radius ──────────────────────────────────────── */ --ds-r-sm: 6px; --ds-r-md: 8px; --ds-r-lg: 12px; --ds-r-xl: 16px; --ds-r-pill: 999px; /* ─── Shadows ─────────────────────────────────────── */ --ds-shadow-xs: 0 1px 2px rgba(15, 18, 25, 0.04); --ds-shadow-sm: 0 1px 3px rgba(15, 18, 25, 0.06), 0 1px 2px rgba(15, 18, 25, 0.04); --ds-shadow-md: 0 4px 12px rgba(15, 18, 25, 0.06), 0 2px 4px rgba(15, 18, 25, 0.04); --ds-shadow-lg: 0 16px 40px rgba(15, 18, 25, 0.10), 0 4px 12px rgba(15, 18, 25, 0.06); /* ─── Spacing ─────────────────────────────────────── */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; --ds-space-12: 48px; /* ─── Typography — Fonts ──────────────────────────── */ /* NOTE: 'General Sans' is the design intent (Fontshare, not on Google Fonts). Self-host required for full fidelity. Inter is the fallback. */ --ds-font-sans: 'General Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ds-font-display: 'General Sans', 'Inter', system-ui, sans-serif; --ds-font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace; /* ─── Typography — Sizes ──────────────────────────── */ --ds-fs-display: 28px; --ds-fs-h1: 18px; --ds-fs-h2: 15px; --ds-fs-h3: 13px; --ds-fs-body: 14px; --ds-fs-small: 13px; --ds-fs-label: 12px; --ds-fs-caption: 11px; --ds-fs-overline: 11px; /* ─── Typography — Line heights ───────────────────── */ --ds-lh-tight: 1.2; --ds-lh-snug: 1.35; --ds-lh-body: 1.5; /* ─── App framing ─────────────────────────────────── */ --ds-topbar-height: 64px; /* ─── Modal ───────────────────────────────────────── */ --ds-modal-w-sm: 400px; --ds-modal-w-md: 520px; --ds-modal-w-lg: 720px; --ds-modal-w-xl: 920px; --ds-modal-radius: 12px; --ds-modal-pad-x: 20px; --ds-modal-pad-y: 16px; --ds-modal-body-pad: 20px; --ds-modal-gap: 14px; --ds-modal-overlay: rgba(15, 18, 25, 0.45); --ds-modal-shadow: 0 24px 60px rgba(15, 18, 25, 0.28), 0 8px 20px rgba(15, 18, 25, 0.12); } /* ─── Theme variants ─────────────────────────────────────── */ [data-sb="light"] { --ds-sb-bg: var(--ds-n-25); --ds-sb-bg-hover: var(--ds-n-100); --ds-sb-bg-active: var(--ds-accent-soft); --ds-sb-text: var(--ds-n-700); --ds-sb-text-muted: var(--ds-n-500); --ds-sb-text-active: var(--ds-accent-fg); --ds-sb-border: var(--ds-n-150); } [data-identity="indigo"] { --ds-accent: #4f46e5; --ds-accent-hover: #4338ca; --ds-accent-soft: #eef2ff; --ds-accent-fg: #1e1b4b; } [data-identity="amber"] { --ds-accent: #b45309; --ds-accent-hover: #92400e; --ds-accent-soft: #fef3c7; --ds-accent-fg: #451a03; } /* ─── Root scope & typography ────────────────────────────── */ .ds-root, .ds-root * { box-sizing: border-box; } .ds-root { font-family: var(--ds-font-sans); font-feature-settings: "cv11", "ss01"; color: var(--ds-text); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; } .ds-display { font-size: var(--ds-fs-display); font-weight: 600; line-height: var(--ds-lh-tight); letter-spacing: -0.02em; } .ds-h1 { font-size: var(--ds-fs-h1); font-weight: 600; line-height: var(--ds-lh-snug); letter-spacing: -0.01em; } .ds-h2 { font-size: var(--ds-fs-h2); font-weight: 600; line-height: var(--ds-lh-snug); } .ds-h3 { font-size: var(--ds-fs-h3); font-weight: 600; line-height: var(--ds-lh-snug); } .ds-body { font-size: var(--ds-fs-body); line-height: var(--ds-lh-body); } .ds-small { font-size: var(--ds-fs-small); line-height: var(--ds-lh-body); color: var(--ds-text-muted); } .ds-label { font-size: var(--ds-fs-label); font-weight: 500; line-height: var(--ds-lh-snug); } .ds-caption { font-size: var(--ds-fs-caption); line-height: var(--ds-lh-snug); color: var(--ds-text-muted); } .ds-overline { font-size: var(--ds-fs-overline); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-text-muted); } .ds-mono { font-family: var(--ds-font-mono); font-feature-settings: "zero", "ss02"; } .ds-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* The HTML `[hidden]` attribute MUST always hide the element. Browser UA sheets declare `[hidden] { display: none }` but its (0,1,0) specificity loses to any author rule that sets `display: …` on the same element (a known pitfall with `

for screen-reader heading navigation (rule 113 a11y) — visual weight is the section eyebrow, not a real heading, but the markup is `

`. / .ds-sb-section { margin: 0; padding: 14px 12px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-sb-text-muted); } .ds-sb-nav { display: flex; flex-direction: column; gap: 1px; padding: 0 8px; } .ds-sb-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--ds-sb-text); cursor: pointer; font-size: 13px; transition: background 0.12s, color 0.12s; text-decoration: none; } .ds-sb-item:hover { background: var(--ds-sb-bg-hover); color: var(--ds-sb-text-active); } / Keyboard focus must remain visible on the dark sidebar — the browser default outline is often invisible at this contrast. / .ds-sb-item:focus-visible { outline: 2px solid var(--ds-sb-text-active); outline-offset: -2px; } / Pre-paint active nav state — CSS-only mirror of `applyActiveNav` from admin-shell-v2.js. Each page declares , and every sidebar item carries `data-nav-key`. By enumerating the slug pairs here we can highlight the current item on FIRST PAINT, before the deferred `admin-shell-v2.js` runs `applyActiveNav` and writes `aria-current="page"`. Without this rule there is a perceptible "no item highlighted" frame between body parse and DOMContentLoaded that the user reads as "the sidebar just reloaded". The JS path still runs and writes the actual `aria-current` attribute — that remains the single source of truth for screen readers; this rule only mirrors its visual effect ahead of time. The selector pairs must stay in sync with the 13 nav slugs in `scripts/sidebar-v2-rebuild.py`. / body[data-admin-nav="attendances"] .ds-sb-item[data-nav-key="attendances"], body[data-admin-nav="conversations"] .ds-sb-item[data-nav-key="conversations"], body[data-admin-nav="proactive-chat"] .ds-sb-item[data-nav-key="proactive-chat"], body[data-admin-nav="scheduling"] .ds-sb-item[data-nav-key="scheduling"], body[data-admin-nav="dashboard"] .ds-sb-item[data-nav-key="dashboard"], body[data-admin-nav="radar"] .ds-sb-item[data-nav-key="radar"], body[data-admin-nav="prospecting"] .ds-sb-item[data-nav-key="prospecting"], body[data-admin-nav="broadcasts"] .ds-sb-item[data-nav-key="broadcasts"], body[data-admin-nav="reports"] .ds-sb-item[data-nav-key="reports"], body[data-admin-nav="contacts"] .ds-sb-item[data-nav-key="contacts"], body[data-admin-nav="templates"] .ds-sb-item[data-nav-key="templates"], body[data-admin-nav="documents"] .ds-sb-item[data-nav-key="documents"], body[data-admin-nav="billing"] .ds-sb-item[data-nav-key="billing"], .ds-sb-item[aria-current="page"] { background: var(--ds-sb-bg-active); color: var(--ds-sb-text-active); font-weight: 500; position: relative; } body[data-admin-nav="attendances"] .ds-sb-item[data-nav-key="attendances"]::before, body[data-admin-nav="conversations"] .ds-sb-item[data-nav-key="conversations"]::before, body[data-admin-nav="proactive-chat"] .ds-sb-item[data-nav-key="proactive-chat"]::before, body[data-admin-nav="scheduling"] .ds-sb-item[data-nav-key="scheduling"]::before, body[data-admin-nav="dashboard"] .ds-sb-item[data-nav-key="dashboard"]::before, body[data-admin-nav="radar"] .ds-sb-item[data-nav-key="radar"]::before, body[data-admin-nav="prospecting"] .ds-sb-item[data-nav-key="prospecting"]::before, body[data-admin-nav="broadcasts"] .ds-sb-item[data-nav-key="broadcasts"]::before, body[data-admin-nav="reports"] .ds-sb-item[data-nav-key="reports"]::before, body[data-admin-nav="contacts"] .ds-sb-item[data-nav-key="contacts"]::before, body[data-admin-nav="templates"] .ds-sb-item[data-nav-key="templates"]::before, body[data-admin-nav="documents"] .ds-sb-item[data-nav-key="documents"]::before, body[data-admin-nav="billing"] .ds-sb-item[data-nav-key="billing"]::before, .ds-sb-item[aria-current="page"]::before { content: ""; position: absolute; left: 0; width: 3px; height: 16px; / Use the always-white sidebar-active text token so the accent bar stays visible even when a tenant customizes `primaryColor` (which also fills `--ds-sb-bg` AND `--ds-sb-accent` — they'd collapse to the same color). / background: var(--ds-sb-text-active); border-radius: 0 3px 3px 0; } .ds-sb-item-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; } .ds-sb-item-label { flex: 1 1 0%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-sb-user { margin-top: auto; padding: 12px; border-top: 1px solid var(--ds-sb-border); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ds-sb-useravatar { flex-shrink: 0; } .ds-sb-userinfo { flex: 1 1 0%; min-width: 0; } .ds-sb-username { font-size: 12.5px; font-weight: 500; color: var(--ds-sb-text-active); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-sb-useremail { font-size: 11px; color: var(--ds-sb-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-sb-useractions { display: inline-flex; gap: 2px; align-items: center; } / Icon action button used by Personalização, Manual de uso, and Logout in the sidebar footer — matches the visual weight of `.ds-btn-icon` but uses the sidebar-specific text color tokens so it reads correctly on dark themes. / .ds-sb-user-action { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; background: transparent; border-radius: var(--ds-r-sm); color: var(--ds-sb-text-muted); cursor: pointer; text-decoration: none; transition: background 0.12s, color 0.12s; } .ds-sb-user-action:hover { background: var(--ds-sb-bg-hover); color: var(--ds-sb-text-active); } .ds-sb-user-action:focus-visible { outline: 2px solid var(--ds-sb-text-active); outline-offset: -2px; } / Honor reduced-motion: disable the 120ms hover/active transitions on sidebar items + footer actions for users with the OS preference set. Also gates the mobile slide-in transition on the 4 pages that use it (`.ds-appsidebar`) so vestibular-sensitive users don't get the 200ms transform on toggle. `!important` is required because the mobile MQ below redeclares `transition: transform 0.2s ease` on `.ds-appsidebar` at the same specificity (0,1,0) and later source order — without `!important`, the reduced-motion reset is shadowed by the MQ declaration. / @media (prefers-reduced-motion: reduce) { .ds-sb-item, .ds-sb-user-action, .ds-appsidebar { transition: none !important; } } / ─── Mobile nav (shared) ─────────────────────────────────── Hamburger trigger button + backdrop + sidebar slide-in behavior at ≤768px. Every V2 page must include `