/* ============================================================================ ICTA Design System — Tokens (single source of truth) ---------------------------------------------------------------------------- Adapted for the OpenHarness Flask dashboard from the ICTA brand kit (E:\icta-tech\ui-icta\tokens\*.css). Provenance documented in docs/audit/07-ui-implementation-log.md. Three official themes selected by `data-theme` on : light (default) — leitura, formulários, relatórios dark — monitoramento, baixa luz; ação migra para mint sand — operação/diagnóstico; ação = preto editorial Only the SEMANTIC aliases change per theme. The base brand palette is constant. Load this file FIRST in , then bridge.css, then motion.css, then the legacy dashboard.css (which the bridge maps onto these tokens). ============================================================================ */ :root { /* ── Base brand palette (theme-agnostic) ───────────────────────────────── */ --icta-ink: #171717; /* texto principal, wordmark */ --icta-paper: #FFFFFF; /* superfície dominante */ --icta-paper-soft: #F7F8FA; /* seções, tabelas, áreas secundárias */ --icta-mist: #C3D2D9; /* linhas técnicas, grids, divisórias */ --icta-blue: #000BDB; /* marca principal — CTAs, foco, gráficos */ --icta-cyan: #0095DB; /* tecnologia / dados / links */ --icta-mint: #00DB91; /* avanço positivo, automação, oportunidade */ --icta-lavender: #C6C8F5; /* formas editoriais amplas */ --icta-navy: #00045A; /* azul profundo — contraste institucional */ /* ── Tints & shades (derivados) ────────────────────────────────────────── */ --icta-blue-deep: #00105F; --icta-blue-tint: #EAF7FA; --icta-mint-tint: #CFF7E9; --icta-lavender-tint: #F0EDF4; /* ── Semantic status ───────────────────────────────────────────────────── */ --icta-success: #00A86B; --icta-warning: #E69B00; --icta-danger: #D92D20; --icta-info: #0095DB; /* Soft status backgrounds (theme-tuned below where needed) */ --icta-success-soft: rgba(0, 168, 107, 0.12); --icta-warning-soft: rgba(230, 155, 0, 0.14); --icta-danger-soft: rgba(217, 45, 32, 0.12); --icta-info-soft: rgba(0, 149, 219, 0.12); /* ── Semantic aliases — LIGHT (default) ────────────────────────────────── */ --icta-text-primary: var(--icta-ink); --icta-text-secondary: rgba(23, 23, 23, 0.68); /* AA on paper: ~5.6:1 */ --icta-text-tertiary: rgba(23, 23, 23, 0.50); /* AA-large / icons */ --icta-text-inverse: #FFFFFF; --icta-link: var(--icta-blue); --icta-surface: var(--icta-paper); --icta-surface-soft: var(--icta-paper-soft); --icta-surface-card: var(--icta-paper); --icta-surface-hover: rgba(0, 11, 219, 0.06); --icta-surface-inset: var(--icta-paper-soft); --icta-line: rgba(23, 23, 23, 0.12); --icta-line-strong: rgba(0, 11, 219, 0.28); --icta-border: rgba(23, 23, 23, 0.10); --icta-action: var(--icta-blue); --icta-action-hover: var(--icta-cyan); --icta-on-action: #FFFFFF; /* ── Typography ────────────────────────────────────────────────────────── */ --icta-font-sans: "Sora", Inter, "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --icta-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; --icta-weight-light: 300; --icta-weight-regular: 400; --icta-weight-medium: 500; --icta-weight-semibold: 600; --icta-weight-bold: 700; --icta-weight-extrabold: 800; --icta-text-display: 64px; --icta-text-h1: 44px; --icta-text-h2: 32px; --icta-text-h3: 24px; --icta-text-h4: 20px; --icta-text-lg: 18px; --icta-text-body: 16px; --icta-text-sm: 14px; --icta-text-label: 13px; --icta-text-caption: 12px; --icta-text-mono: 13px; --icta-leading-tight: 0.95; --icta-leading-snug: 1.2; --icta-leading-normal: 1.5; --icta-leading-relaxed: 1.65; --icta-tracking-tight: -0.045em; --icta-tracking-snug: -0.02em; --icta-tracking-normal: 0; --icta-tracking-wide: 0.08em; /* ── Spacing (4px rhythm) ──────────────────────────────────────────────── */ --icta-space-xs: 4px; --icta-space-sm: 8px; --icta-space-md: 16px; --icta-space-lg: 24px; --icta-space-xl: 40px; --icta-space-xxl: 64px; --icta-space-section: 96px; /* ── Radii ─────────────────────────────────────────────────────────────── */ --icta-radius-sm: 8px; --icta-radius-md: 12px; --icta-radius-lg: 18px; --icta-radius-xl: 28px; --icta-radius-pill: 999px; /* ── Layout ────────────────────────────────────────────────────────────── */ --icta-max-w: 1200px; --icta-max-w-prose: 720px; --icta-header-h: 60px; --icta-input-h: 52px; /* ── Shadows (deliberately discrete) ───────────────────────────────────── */ --icta-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --icta-shadow-md: 0 12px 32px rgba(0, 11, 219, 0.10); --icta-shadow-lg: 0 24px 60px rgba(0, 11, 219, 0.12); /* ── Focus / state rings ───────────────────────────────────────────────── */ --icta-focus-ring: 0 0 0 4px rgba(0, 11, 219, 0.18); --icta-positive-ring: 0 0 0 6px rgba(0, 219, 145, 0.14); /* ── Motion ────────────────────────────────────────────────────────────── */ --icta-motion-fast: 140ms; --icta-motion-base: 220ms; --icta-motion-slow: 320ms; --icta-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* ── Z-index scale (semantic; no arbitrary 9999) ───────────────────────── */ --icta-z-base: 0; --icta-z-sidebar: 50; --icta-z-sidebar-scrim: 49; --icta-z-sidepanel: 60; --icta-z-sticky: 100; --icta-z-dropdown: 200; --icta-z-modal-backdrop: 900; --icta-z-modal: 950; --icta-z-toast: 1000; --icta-z-tooltip: 1100; } /* ── DARK ────────────────────────────────────────────────────────────────── Fundo escuro; menta vira a cor de ação/estado; ciano para informação. */ [data-theme="dark"] { --icta-ink: #FFFFFF; --icta-paper: #171717; --icta-paper-soft: #222222; --icta-text-primary: rgba(255, 255, 255, 0.96); --icta-text-secondary: rgba(255, 255, 255, 0.74); /* AA on #171717 */ --icta-text-tertiary: rgba(255, 255, 255, 0.50); --icta-text-inverse: #171717; --icta-link: var(--icta-mint); --icta-surface: #171717; --icta-surface-soft: #1E1E1E; --icta-surface-card: #1E1E1E; --icta-surface-hover: rgba(0, 219, 145, 0.10); --icta-surface-inset: #121212; --icta-line: rgba(255, 255, 255, 0.14); --icta-line-strong: rgba(0, 219, 145, 0.40); --icta-border: rgba(255, 255, 255, 0.12); --icta-action: var(--icta-mint); --icta-action-hover: var(--icta-cyan); --icta-on-action: #00131F; --icta-success-soft: rgba(0, 219, 145, 0.16); --icta-warning-soft: rgba(230, 155, 0, 0.20); --icta-danger-soft: rgba(217, 45, 32, 0.22); --icta-info-soft: rgba(0, 149, 219, 0.20); --icta-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30); --icta-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.40); --icta-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.50); } /* ── SAND ────────────────────────────────────────────────────────────────── Fundo quente, preto editorial conduz a ação. Inspirado no site público. */ [data-theme="sand"] { --icta-ink: #171717; --icta-paper: #F4F1EA; --icta-paper-soft: #EEE7DA; --icta-mist: #D8D0C3; --icta-text-primary: #171717; --icta-text-secondary: #5F5A52; /* darkened from kit #6F6A61 for AA on sand */ --icta-text-tertiary: rgba(23, 23, 23, 0.52); --icta-text-inverse: #FFFDF8; --icta-link: var(--icta-blue); --icta-surface: #F4F1EA; --icta-surface-soft: #EEE7DA; --icta-surface-card: #FFFDF8; --icta-surface-hover: rgba(23, 23, 23, 0.06); --icta-surface-inset: #E8DDC8; --icta-line: #D8D0C3; --icta-line-strong: rgba(23, 23, 23, 0.26); --icta-border: rgba(23, 23, 23, 0.14); --icta-action: #171717; /* preto editorial conduz a ação no sand */ --icta-action-hover: #000BDB; --icta-on-action: #FFFDF8; --icta-success-soft: rgba(0, 168, 107, 0.14); --icta-warning-soft: rgba(230, 155, 0, 0.18); --icta-danger-soft: rgba(217, 45, 32, 0.14); --icta-info-soft: rgba(0, 149, 219, 0.14); --icta-shadow-sm: 0 1px 0 rgba(23, 23, 23, 0.10); --icta-shadow-md: 0 18px 42px rgba(23, 23, 23, 0.10); --icta-shadow-lg: 0 28px 64px rgba(23, 23, 23, 0.12); } /* Smooth, brand-consistent theme cross-fade. Disabled under reduced-motion (see motion.css). Scoped so it never animates on first paint. */ .icta-theming, .icta-theming *, .icta-theming *::before, .icta-theming *::after { transition: background-color var(--icta-motion-slow) ease, color var(--icta-motion-slow) ease, border-color var(--icta-motion-slow) ease, box-shadow var(--icta-motion-slow) ease; }