/* ========================================================================= AURO Vistoria — Design Tokens ------------------------------------------------------------------------- Variaveis CSS base do painel admin. Importar ANTES do Tailwind CDN para permitir override sem !important. Suporta dark mode via [data-theme="dark"] no ou . Inspirado em Stitch (Google): off-white quente + accent preto, minimalismo, tipografia limpa, espacamento generoso. ========================================================================= */ :root { /* --------------------------------------------------------------------- CORES — Backgrounds (off-white quente) --------------------------------------------------------------------- */ --ds-bg: #FDF8F8; /* fundo geral da aplicacao */ --ds-bg-2: #F7F3F2; /* hover de linha, sub-cards */ --ds-bg-3: #F1EDEC; /* botoes secundarios, chips */ --ds-bg-card: #FFFFFF; /* fundo de cards / modais */ --ds-bg-overlay: rgba(0, 0, 0, 0.6); /* fundo de modal */ /* --------------------------------------------------------------------- CORES — Tinta (texto) --------------------------------------------------------------------- */ --ds-ink: #1C1B1B; /* texto principal */ --ds-ink-muted: #444748; /* texto secundario */ --ds-ink-soft: #747878; /* texto terciario / placeholder */ --ds-ink-inverse: #FFFFFF; /* texto sobre superficies escuras */ /* --------------------------------------------------------------------- CORES — Bordas --------------------------------------------------------------------- */ --ds-border: #E5E2E1; --ds-border-strong: #D0CCCB; --ds-border-focus: #1C1B1B; /* --------------------------------------------------------------------- CORES — Accent (preto AURO) + estados --------------------------------------------------------------------- */ --ds-accent: #000000; --ds-accent-hover: #1F1F1F; --ds-accent-active: #2E2E2E; --ds-accent-disabled: #BDBDBD; --ds-accent-fg: #FFFFFF; /* --------------------------------------------------------------------- CORES — Semanticas (success / danger / warn / info) Cada cor traz: base + fg (texto sobre ela) + bg (tom claro p/ badges/toasts) --------------------------------------------------------------------- */ --ds-success: #16A34A; --ds-success-hover: #138A3F; --ds-success-active: #0F7434; --ds-success-fg: #FFFFFF; --ds-success-bg: #D1FAE5; --ds-success-ink: #065F46; --ds-danger: #BA1A1A; --ds-danger-hover: #9F1616; --ds-danger-active: #851212; --ds-danger-fg: #FFFFFF; --ds-danger-bg: #FEE2E2; --ds-danger-ink: #991B1B; --ds-warn: #B45309; --ds-warn-hover: #964707; --ds-warn-active: #7C3B06; --ds-warn-fg: #FFFFFF; --ds-warn-bg: #FEF3C7; --ds-warn-ink: #92400E; --ds-info: #1E40AF; --ds-info-hover: #1A3792; --ds-info-active: #152E78; --ds-info-fg: #FFFFFF; --ds-info-bg: #DBEAFE; --ds-info-ink: #1E40AF; /* --------------------------------------------------------------------- TIPOGRAFIA --------------------------------------------------------------------- */ --ds-font-sans: -apple-system, BlinkMacSystemFont, "Inter", system-ui, "Segoe UI", Roboto, sans-serif; --ds-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Escala tipografica — hierarquia clara */ --ds-text-h1: 30px; /* titulo de pagina */ --ds-text-h2: 22px; /* titulo de secao */ --ds-text-h3: 16px; /* titulo de card */ --ds-text-body: 14px; /* corpo padrao */ --ds-text-sm: 13px; /* descritivos */ --ds-text-label: 11px; /* labels em CAPS */ --ds-text-caption: 10px; /* legendas, metadados */ /* Pesos */ --ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700; /* Alturas de linha */ --ds-leading-tight: 1.2; --ds-leading-normal: 1.5; --ds-leading-loose: 1.7; /* Letter spacing */ --ds-tracking-tight: -0.02em; --ds-tracking-normal: 0; --ds-tracking-wide: 0.05em; --ds-tracking-caps: 0.08em; /* p/ labels em CAPS */ /* --------------------------------------------------------------------- ESPACAMENTOS — escala 4px --------------------------------------------------------------------- */ --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-7: 32px; --ds-space-8: 40px; --ds-space-9: 48px; --ds-space-10: 56px; --ds-space-11: 64px; --ds-space-12: 80px; /* --------------------------------------------------------------------- RADIUS --------------------------------------------------------------------- */ --ds-radius-sm: 6px; /* badges, chips */ --ds-radius-md: 8px; /* botoes, inputs */ --ds-radius-lg: 12px; /* cards, modais */ --ds-radius-xl: 16px; /* hero cards */ --ds-radius-full: 9999px; /* --------------------------------------------------------------------- SHADOWS --------------------------------------------------------------------- */ --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --ds-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.14); --ds-shadow-focus: 0 0 0 3px rgba(28, 27, 27, 0.15); /* --------------------------------------------------------------------- Z-INDEX — escala dedicada --------------------------------------------------------------------- */ --ds-z-base: 0; --ds-z-dropdown: 30; --ds-z-overlay: 40; --ds-z-modal: 50; --ds-z-toast: 60; --ds-z-tooltip: 70; /* --------------------------------------------------------------------- TRANSICOES padrao --------------------------------------------------------------------- */ --ds-transition-fast: 120ms ease-out; --ds-transition-base: 200ms ease-out; --ds-transition-slow: 320ms ease-out; --ds-easing-spring: cubic-bezier(0.22, 1, 0.36, 1); /* --------------------------------------------------------------------- TAMANHOS auxiliares --------------------------------------------------------------------- */ --ds-sidebar-w: 240px; --ds-content-max: 1280px; --ds-input-h-sm: 32px; --ds-input-h-md: 38px; --ds-input-h-lg: 44px; } /* ========================================================================= DARK MODE Aplica em ou . Mantemos a mesma "linguagem" (tinta + accent) so invertendo as luminancias. ========================================================================= */ [data-theme="dark"] { --ds-bg: #131111; --ds-bg-2: #1A1818; --ds-bg-3: #232020; --ds-bg-card: #1C1B1B; --ds-bg-overlay: rgba(0, 0, 0, 0.75); --ds-ink: #F5F0EF; --ds-ink-muted: #BFBAB9; --ds-ink-soft: #8A8584; --ds-ink-inverse: #131111; --ds-border: #2E2A29; --ds-border-strong: #403B3A; --ds-border-focus: #F5F0EF; --ds-accent: #F5F0EF; --ds-accent-hover: #E6E1E0; --ds-accent-active: #D6D1D0; --ds-accent-disabled: #4A4747; --ds-accent-fg: #131111; --ds-success-bg: #06381F; --ds-success-ink: #6EE7B7; --ds-danger-bg: #4A0E0E; --ds-danger-ink: #FCA5A5; --ds-warn-bg: #3F2606; --ds-warn-ink: #FCD34D; --ds-info-bg: #0F1F4D; --ds-info-ink: #93C5FD; --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --ds-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.7); --ds-shadow-focus: 0 0 0 3px rgba(245, 240, 239, 0.22); } /* ========================================================================= RESET MINIMO — opcional, garante consistencia de fonte/cor base ========================================================================= */ html, body { background: var(--ds-bg); color: var(--ds-ink); font-family: var(--ds-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); border-radius: var(--ds-radius-sm); } [x-cloak] { display: none !important; }