/* Design tokens — Lukana Finance UI Kit (valores extraídos do .fig, não de screenshots). Paleta: lima #9FE870 (Primary/500) + verde-escuro #062F28; neutros #F7F7F7/#EEEEEE; texto preto + #7B7B7B; semânticas com fundo a 10% de opacidade; pills (r=100) e cards r=16. Tema claro = principal; tema escuro via .dark no . */ :root { /* Fundo (Lukana: página #f7f7f7, cards brancos, cinzas #f5f5f5/#fafafa) */ --bg-primary: #ffffff; --bg-secondary: #f7f7f7; --sidebar-bg: #ffffff; --bg-tertiary: #f5f5f5; --bg-quaternary: #f0f0f0; --bg-hover: rgba(0, 0, 0, 0.03); --bg-hover-medium: rgba(0, 0, 0, 0.06); --bg-danger: rgba(248, 100, 50, 0.10); /* Texto (Lukana: #000 primário, #7b7b7b secundário, #737373 inputs/menus, #a3a3a3 leve) */ --text-primary: #000000; --text-secondary: #737373; --text-tertiary: #7b7b7b; --text-light: #a3a3a3; --text-extralight: #c6c6c6; --text-inverted: #ffffff; --text-danger: #f86432; /* Bordas (Lukana: #eeeeee dominante, #e5e5e5 forte, #f2f2f2 suave) */ --border-strong: #e5e5e5; --border-medium: #eeeeee; --border-light: #f2f2f2; --border-blue: #9fe870; /* Accent — Primary/500 do kit (#9FE870, texto preto por cima) + verde-escuro #062F28. --blue mantém o nome por compatibilidade com o resto do CSS. */ --blue: #9fe870; --blue-hover: #8fdb5e; /* derivado: Primary/500 escurecido (hover não existe no .fig) */ --blue-pressed: #6ac92d; /* Primary/700 do kit */ --on-accent: #163300; /* texto sobre o lima no kit («Send Invoice» = #163300, verde-floresta) */ --accent-primary: #9fe870; --accent-tertiary: rgba(159, 232, 112, 0.16); --accent-text: #062f28; --accent-dark: #062f28; /* superfícies escuras de destaque (hero cards, login) */ /* COINEST (referência do Cláudio, 2026-07-21) — verde-floresta profundo p/ o card-herói + mentas suaves p/ cartões e badges. Convivem com o lima (accent). */ --forest: #0f3d2e; /* fundo do card-herói do painel (verde-floresta) */ --forest-deep: #062f28; /* fim do gradiente / variante mais escura */ --on-forest: #ffffff; /* texto sobre o verde-floresta */ --mint-soft: #dcf3e4; /* menta suave — chips/realces sobre branco */ --mint-tint: #c8e6d0; /* menta média — bordas/realces dos cartões suaves */ --mint-line: #e2f1e7; /* menta ténue — linha de contorno dos KPI */ --forest-glow: rgba(15, 61, 46, 0.24); /* sombra própria do herói */ /* Semânticas (do censo real do kit) */ --green: #009f42; --red: #f86432; --orange: #f86432; --amber: #ffbd4c; --purple: #5f41b4; --pink: #95122b; --turquoise: #287f6e; --info: #0a53c0; /* Raio (Lukana: 8 base, 10 inputs, 16 cards, 20 icon-btns, 100 pills, 50 badges) */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; /* Sombras — o kit é quase flat; a tabela usa a dupla real do .fig: 0 0 0 1 #e5e5e5 + 0 4 8 -5 rgba(0,0,0,.15) */ --shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.03); --shadow-card: 0 0 0 1px #e5e5e5, 0 4px 8px -5px rgba(0, 0, 0, 0.15); --shadow-strong: 0 4px 16px 0 rgba(0, 0, 0, 0.08); --shadow-modal: 0 0 8px 0 rgba(0, 0, 0, 0.08), 0 16px 48px -12px rgba(0, 0, 0, 0.24); --focus-ring: 0 0 0 3px rgba(159, 232, 112, 0.35); --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; /* Tags (bg = cor a 10%, texto = cor cheia — badges pill do kit, ex.: #009f42@0.10) */ --tag-bg-blue: rgba(10, 83, 192, 0.10); --tag-text-blue: #0a53c0; --tag-bg-green: rgba(0, 159, 66, 0.10); --tag-text-green: #009f42; --tag-bg-red: rgba(248, 100, 50, 0.10); --tag-text-red: #f86432; --tag-bg-orange: rgba(248, 100, 50, 0.10);--tag-text-orange: #f86432; --tag-bg-purple: #f4f0ff; --tag-text-purple: #5f41b4; --tag-bg-amber: rgba(255, 189, 76, 0.16); --tag-text-amber: #b47712; --tag-bg-teal: #effefa; --tag-text-teal: #287f6e; --tag-bg-gray: #f5f5f5; --tag-text-gray: #737373; } .dark { /* Neutros escuros do kit (Gray/13 #0f0e0e, Gray/12 #21201f, Gray/11 #2a2726) */ --bg-primary: #1a1a19; --bg-secondary: #0f0e0e; --sidebar-bg: #1a1a19; --bg-tertiary: #21201f; --bg-quaternary: #2a2726; --bg-hover: rgba(255, 255, 255, 0.04); --bg-hover-medium: rgba(255, 255, 255, 0.08); --bg-danger: rgba(248, 100, 50, 0.16); --text-primary: #ffffff; --text-secondary: #a3a3a3; --text-tertiary: #a3a3a3; --text-light: #737373; --text-extralight: #555555; --text-inverted: #0f0e0e; --border-strong: #3a3836; --border-medium: #2a2726; --border-light: #21201f; --blue-hover: #b4ff83; /* Primary/600 do kit */ --accent-primary: #9fe870; --accent-tertiary: rgba(159, 232, 112, 0.12); --accent-text: #9fe870; --accent-dark: #062f28; /* COINEST em tema escuro — o herói mantém o verde-floresta; as mentas passam a véus translúcidos (não fundos claros) para não «furar» o fundo escuro. */ --forest: #0f3d2e; --forest-deep: #062f28; --on-forest: #ffffff; --mint-soft: rgba(159, 232, 112, 0.10); --mint-tint: rgba(159, 232, 112, 0.22); --mint-line: rgba(159, 232, 112, 0.14); --forest-glow: rgba(0, 0, 0, 0.45); --shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow-card: 0 0 0 1px #2a2726, 0 4px 8px -5px rgba(0, 0, 0, 0.5); --shadow-strong: 0 4px 16px 0 rgba(0, 0, 0, 0.5); --shadow-modal: 0 0 8px 0 rgba(0, 0, 0, 0.5), 0 16px 48px -12px rgba(0, 0, 0, 0.7); --focus-ring: 0 0 0 3px rgba(159, 232, 112, 0.25); --tag-bg-blue: rgba(10, 83, 192, 0.25); --tag-text-blue: #7aa7ff; --tag-bg-green: rgba(0, 159, 66, 0.18); --tag-text-green: #4cd47f; --tag-bg-red: rgba(248, 100, 50, 0.18); --tag-text-red: #ff8a63; --tag-bg-orange: rgba(248, 100, 50, 0.18);--tag-text-orange: #ff8a63; --tag-bg-purple: rgba(95, 65, 180, 0.25); --tag-text-purple: #ac8bf3; --tag-bg-amber: rgba(255, 189, 76, 0.18); --tag-text-amber: #ffbd4c; --tag-bg-teal: rgba(40, 127, 110, 0.25); --tag-text-teal: #40c4aa; --tag-bg-gray: #21201f; --tag-text-gray: #a3a3a3; }