/* ============================================================ Lisboa Leads — Design Tokens Dark-first operational backoffice. Maps to Django: load once in base.html via {% static %}. Direction variants applied via [data-direction] on . ============================================================ */ :root { /* ---- Base color ramp (graphite / slate) -------------------- */ --bg-0: #0a0d13; /* app canvas, behind everything */ --bg-1: #0e121a; /* primary surface (sidebar, panels) */ --bg-2: #141a24; /* raised surface (cards, header, inputs) */ --bg-3: #1a2230; /* hover / row hover */ --bg-4: #212b3b; /* active / pressed / strong hover */ --line: #232c3b; /* hairline border */ --line-strong: #2f3a4d; /* emphasized border */ --line-faint: #1a2230; /* barely-there divider */ --text-0: #eef1f6; /* primary text */ --text-1: #aeb8c7; /* secondary text */ --text-2: #7a8699; /* tertiary / meta */ --text-3: #586374; /* disabled / faint */ /* ---- Accent (focus / active / CTA / selection) ------------- */ --accent: #3b82f6; --accent-hover: #5a97f8; --accent-press: #2f6fe0; --accent-fg: #ffffff; --accent-soft: rgba(59, 130, 246, 0.14); --accent-softer: rgba(59, 130, 246, 0.08); --accent-line: rgba(59, 130, 246, 0.45); --accent-text: #8fb6fb; /* ---- Status / semantic ------------------------------------- */ --ok: #2fb37a; /* cool green — validated / pass */ --ok-text: #57d49d; --ok-soft: rgba(47, 179, 122, 0.14); --ok-line: rgba(47, 179, 122, 0.40); --warn: #d4982b; /* dry amber — follow-up / caution */ --warn-text: #ecb755; --warn-soft: rgba(212, 152, 43, 0.15); --warn-line: rgba(212, 152, 43, 0.40); --danger: #e0524d; /* controlled red — rejected / fail */ --danger-text: #f0837f; --danger-soft: rgba(224, 82, 77, 0.14); --danger-line: rgba(224, 82, 77, 0.40); --neutral-soft: rgba(122, 134, 153, 0.14); /* pending / muted */ --neutral-line: rgba(122, 134, 153, 0.30); /* ---- Typography -------------------------------------------- */ --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --fs-2xs: 12px; --fs-xs: 13px; --fs-sm: 14px; --fs-base:16px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal:1.55; --tracking-label: 0.06em; --tracking-tight: -0.01em; /* ---- Spacing (4px base) ------------------------------------ */ --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px; --sp-9: 32px; --sp-10:40px; --sp-11:48px; --sp-12:64px; /* ---- Radii ------------------------------------------------- */ --r-xs: 3px; --r-sm: 5px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-full:999px; /* ---- Elevation (subtle, dark) ------------------------------ */ --shadow-1: 0 1px 2px rgba(0,0,0,0.45); --shadow-2: 0 4px 14px rgba(0,0,0,0.45); --shadow-3: 0 18px 48px rgba(0,0,0,0.55); --shadow-pop: 0 10px 30px rgba(0,0,0,0.6); /* ---- Shell metrics ----------------------------------------- */ --sidebar-w: 232px; --topbar-h: 52px; --row-h: 44px; /* table row height — tuned by density */ --content-max: 1680px; /* ---- Focus ------------------------------------------------- */ --ring: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent); --ring-tight: 0 0 0 2px var(--accent); --ease: cubic-bezier(0.2, 0, 0, 1); --dur: 130ms; } /* ============================================================ DIRECTION VARIANTS (1) conservative — flat, minimal accent, grey-dominant (2) operational — balanced default (defined above) (3) bold — stronger contrast, confident accent, console feel ============================================================ */ /* (1) Conservadora — restrained, hairline, accent only where essential */ [data-direction="conservative"] { --bg-0: #0c0e12; --bg-1: #11141a; --bg-2: #161a21; --bg-3: #1c222b; --bg-4: #232a35; --line: #222831; --line-strong: #2c333f; --accent: #4f7cc4; --accent-hover: #6a93d4; --accent-soft: rgba(79, 124, 196, 0.12); --accent-text: #93b2dd; --r-xs: 3px; --r-sm: 4px; --r-md: 5px; --r-lg: 6px; --r-xl: 8px; --fs-base: 13px; --row-h: 42px; } /* (3) Ousada mas séria — high contrast, confident accent, denser command UI */ [data-direction="bold"] { --bg-0: #06080d; --bg-1: #0a0e16; --bg-2: #111825; --bg-3: #182234; --bg-4: #1f2c43; --line: #1f2a3c; --line-strong: #34466a; --accent: #3b82f6; --accent-hover: #62a0ff; --accent-soft: rgba(59, 130, 246, 0.18); --accent-text: #a9c7ff; --text-0: #f4f7fc; --text-1: #b6c2d6; --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 10px; --tracking-label: 0.10em; --row-h: 46px; } /* Density override (set via JS data-density) */ [data-density="compact"] { --row-h: 38px; } [data-density="cozy"] { --row-h: 52px; }