/* ────────────────────────────────────────────────────────────────── * EducaSaude · Design Tokens · v0.3 * * Drop-in for Bootstrap 5 + Tabler UI projects. * * Switch theme via `` or via JS: * document.documentElement.dataset.theme = 'dark'; * * All tokens are NAMESPACED as `--es-*` (educa·saúde) so they never * collide with Bootstrap (`--bs-*`) or Tabler (`--tblr-*`). Map Bootstrap * primary etc. at the bottom of this file (commented out — un-comment in * your project's main stylesheet to wire them up). * ────────────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* ─── Surfaces ─── */ --es-bg: #F4F6FB; --es-surface: #FFFFFF; --es-panel: #FAFBFE; --es-input-bg: #FFFFFF; /* ─── Text ─── */ --es-ink: #0B1733; --es-ink-soft: #3B4863; --es-muted: #6B7794; /* ─── Borders ─── */ --es-line: #E1E6F0; --es-line-soft: #EDF0F7; /* ─── Brand ─── */ --es-primary: #1E3A8A; --es-primary-deep: #0F1F5C; --es-primary-light: #EEF2FE; --es-primary-ink: #FFFFFF; /* ─── Accent ─── */ --es-accent: #0EA5B7; --es-accent-soft: #E0F4F6; /* ─── Status ─── */ --es-success: #0F8C5E; --es-success-soft: #E5F4ED; --es-warn: #C57B0A; --es-warn-soft: #FBF1DA; --es-danger: #C03A2F; --es-danger-soft: #FCE8E5; /* ─── Sidebar (dark in BOTH themes by design) ─── */ --es-sidebar-bg: #0B1733; --es-sidebar-ink: #E2E8F3; --es-sidebar-muted: #7C89A8; --es-sidebar-line: rgba(255,255,255,0.07); --es-sidebar-active-bg: rgba(30,58,138,0.40); --es-sidebar-active-bar:#0EA5B7; /* ─── Radii ─── */ --es-radius-sm: 4px; --es-radius: 8px; --es-radius-lg: 12px; --es-radius-xl: 16px; --es-radius-pill: 999px; /* ─── Shadows ─── */ --es-shadow-sm: 0 1px 2px rgba(11,23,51,0.04); --es-shadow: 0 4px 12px rgba(11,23,51,0.06), 0 1px 2px rgba(11,23,51,0.04); --es-shadow-lg: 0 12px 30px -8px rgba(11,23,51,0.12), 0 4px 10px rgba(11,23,51,0.04); --es-shadow-card: 0 0.1875rem 0.8rem 0 rgba(34, 48, 135, 0.06); --es-focus-ring: 0 0 0 3px rgba(30,58,138,0.18); /* ─── Typography ─── */ --es-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --es-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --es-font-feature: "tnum"; } :root[data-theme="dark"] { --es-bg: #0B1228; --es-surface: #141A3A; --es-panel: #0F1530; --es-ink: #EAEEF8; --es-ink-soft: #A8B0C8; --es-muted: #6F7895; --es-line: rgba(255,255,255,0.08); --es-line-soft: rgba(255,255,255,0.04); --es-primary: #5B7FE5; --es-primary-deep: #1E3A8A; --es-primary-light: rgba(91,127,229,0.18); --es-accent: #22D3EE; --es-accent-soft: rgba(34,211,238,0.15); --es-success: #34D399; --es-success-soft: rgba(52,211,153,0.15); --es-warn: #FBBF24; --es-warn-soft: rgba(251,191,36,0.15); --es-danger: #F87171; --es-danger-soft: rgba(248,113,113,0.15); --es-input-bg: #1E2B4A; --es-sidebar-bg: #060A18; --es-sidebar-ink: #E2E8F3; --es-sidebar-muted: #7C89A8; --es-sidebar-line: rgba(255,255,255,0.05); --es-sidebar-active-bg: rgba(91,127,229,0.18); --es-sidebar-active-bar:#22D3EE; --es-shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --es-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --es-shadow-lg: 0 12px 30px -8px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.3); --es-shadow-card: 0 0.1875rem 0.8rem 0 rgba(0,0,0,0.35); --es-focus-ring: 0 0 0 3px rgba(91,127,229,0.32); /* ─── Bootstrap dark overrides — garante que componentes BS usem nossos tokens ─── */ --bs-body-bg: var(--es-bg); --bs-body-color: var(--es-ink); --bs-secondary-bg: var(--es-panel); --bs-tertiary-bg: var(--es-panel); --bs-border-color: var(--es-line); --bs-card-bg: var(--es-surface); --bs-table-bg: transparent; --bs-table-color: var(--es-ink); --bs-table-border-color: var(--es-line); --bs-table-striped-bg: rgba(255,255,255,0.03); --bs-table-hover-bg: rgba(255,255,255,0.04); --bs-table-accent-bg: transparent; } /* ────────────────────────────────────────────────────────────────── * Bootstrap 5 overrides — paste into your main stylesheet or import * this file BEFORE Bootstrap CSS so these win. Uses `--bs-*` vars that * Bootstrap 5.3+ exposes natively. * ────────────────────────────────────────────────────────────────── */ :root { --bs-primary: var(--es-primary); --bs-primary-rgb: 30, 58, 138; /* keep in sync with --es-primary */ --bs-body-bg: var(--es-bg); --bs-body-color: var(--es-ink); --bs-border-color: var(--es-line); --bs-link-color: var(--es-primary); --bs-success: var(--es-success); --bs-warning: var(--es-warn); --bs-danger: var(--es-danger); --bs-font-sans-serif: var(--es-font-sans); --bs-font-monospace: var(--es-font-mono); } :root[data-theme="dark"] { --bs-primary-rgb: 91, 127, 229; --bs-body-bg: var(--es-bg); --bs-body-color: var(--es-ink); --bs-border-color: var(--es-line); --bs-card-bg: var(--es-surface); --bs-secondary-bg: var(--es-panel); --bs-tertiary-bg: var(--es-panel); --bs-emphasis-color: var(--es-ink); color-scheme: dark; } /* ────────────────────────────────────────────────────────────────── * Tabler overrides (selectors used by the existing KaiAdmin template * — keep in mind the project's CSS files override Tabler defaults). * ────────────────────────────────────────────────────────────────── */ .btn-primary { background: var(--es-primary) !important; border-color: var(--es-primary) !important; color: var(--es-primary-ink) !important; font-weight: 700; border-radius: var(--es-radius); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 4px 10px -4px var(--es-primary); } .btn-primary:hover { background: var(--es-primary-deep) !important; border-color: var(--es-primary-deep) !important; } .btn-primary:focus { box-shadow: var(--es-focus-ring) !important; } .form-control, .form-select { background: var(--es-input-bg); color: var(--es-ink); border: 1.5px solid var(--es-line); border-radius: var(--es-radius); font-family: var(--es-font-sans); } .form-control:focus, .form-select:focus { border-color: var(--es-primary); box-shadow: var(--es-focus-ring); } .form-label { font-family: var(--es-font-mono); font-size: 10.5px; font-weight: 600; color: var(--es-ink-soft); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 7px; } .card { background: var(--es-surface); border: 1px solid var(--es-line); border-radius: var(--es-radius-lg); box-shadow: var(--es-shadow-sm); } /* Sidebar — matches the dark navy permanent design */ .sidebar { background: var(--es-sidebar-bg) !important; color: var(--es-sidebar-ink) !important; font-family: var(--es-font-sans); } .sidebar .nav-item.active > a { background: var(--es-sidebar-active-bg); color: #fff !important; position: relative; } .sidebar .nav-item.active > a::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--es-sidebar-active-bar); border-radius: 2px; } /* Page typography */ body { font-family: var(--es-font-sans); -webkit-font-smoothing: antialiased; } .page-header h3, .page-header h1 { font-weight: 700; letter-spacing: -0.5px; } .breadcrumbs { font-family: var(--es-font-mono); font-size: 11.5px; letter-spacing: 0.4px; } .text-mono, code, kbd { font-family: var(--es-font-mono); font-feature-settings: var(--es-font-feature); } /* Pills / badges */ .badge { font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.2px; } .badge-primary { background: var(--es-primary-light); color: var(--es-primary); } .badge-success { background: var(--es-success-soft); color: var(--es-success); } .badge-warn { background: var(--es-warn-soft); color: var(--es-warn); } .badge-danger { background: var(--es-danger-soft); color: var(--es-danger); } /* ─── SweetAlert2 — notificações de canto (top-end) ────────────────────────── * Definido aqui (e não em components.css) porque tokens.css é carregado por * TODAS as telas — inclusive Login (Layout = null), que não inclui components.css. * Garante toast idêntico em login e dentro do sistema. * Escopo restrito a .swal2-top-end para não afetar alertas centrados * (confirmações, erros fatais). A maior especificidade vence o sweetalert2.min.css * independentemente da ordem de carregamento. * font-size em `em` escala ícone, título, texto e padding proporcionalmente. * ─────────────────────────────────────────────────────────────────────────── */ .swal2-container.swal2-top-end .swal2-popup, .swal2-container.swal2-top-right .swal2-popup { font-size: 0.85rem; /* tamanho médio — entre o padrão (1rem) e o reduzido (0.72rem) */ min-width: 300px; /* mantém o toast horizontal, não quadrado */ width: auto; max-width: 30em; } /* Select2 — override movido para components.css (carrega após select2.min.css) */