/* ============================================================================ OficinaOS — tokens.css "Precision Cockpit" — instrumento de diagnóstico premium. Dark-first. OKLCH em tudo. Implementação canônica de docs/DESIGN.md §3–§6, §8. Tema dark no :root · tema claro em [data-theme="light"]. ============================================================================ */ :root { color-scheme: dark; /* ---- Superfícies (grafite com sussurro frio — instrument bay) ---------- */ --bg: oklch(0.15 0.008 215); --surface-1: oklch(0.185 0.009 215); --surface-2: oklch(0.225 0.010 215); --surface-3: oklch(0.27 0.011 215); --border: oklch(0.32 0.012 215); --border-strong: oklch(0.40 0.014 215); /* ---- Tinta (texto) ---------------------------------------------------- */ --ink: oklch(0.96 0.004 220); --ink-2: oklch(0.80 0.006 220); --ink-3: oklch(0.64 0.008 220); /* ---- Marca — Primária (verdigris / leitor do instrumento) ------------- */ --primary: oklch(0.80 0.12 184); --primary-strong: oklch(0.72 0.13 184); --primary-ink: oklch(0.20 0.02 184); --primary-soft: color-mix(in oklch, var(--primary) 14%, transparent); /* ---- Acento — Cobre quente (lâmpada-piloto / sinal "ao vivo") --------- */ --accent: oklch(0.76 0.135 58); --accent-strong: oklch(0.70 0.14 58); --accent-ink: oklch(0.20 0.03 58); --accent-soft: color-mix(in oklch, var(--accent) 16%, transparent); /* ---- Semânticos ------------------------------------------------------- */ --success: oklch(0.80 0.16 150); --success-soft: color-mix(in oklch, var(--success) 16%, transparent); --warning: oklch(0.83 0.15 85); --warning-soft: color-mix(in oklch, var(--warning) 16%, transparent); --danger: oklch(0.68 0.20 25); --danger-soft: color-mix(in oklch, var(--danger) 18%, transparent); --whats: oklch(0.78 0.15 150); --whats-soft: color-mix(in oklch, var(--whats) 16%, transparent); /* ---- Data-viz (sequência) --------------------------------------------- */ --viz-1: var(--primary); /* verdigris */ --viz-2: var(--accent); /* cobre */ --viz-3: oklch(0.72 0.14 290); /* violeta */ --viz-4: var(--warning); /* âmbar */ --viz-5: oklch(0.65 0.02 220); /* slate */ /* ---- Tipografia ------------------------------------------------------- */ --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* tamanhos fluidos / escala tipográfica */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.8125rem; /* 13 */ --fs-base: 0.9375rem; /* 15 */ --fs-md: 1rem; /* 16 */ --fs-lg: 1.125rem; /* 18 */ --fs-xl: 1.375rem; /* 22 */ --fs-2xl: 1.75rem; /* 28 */ --fs-3xl: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); --fs-4xl: clamp(2.6rem, 1.6rem + 4vw, 4rem); --lh-tight: 1.12; --lh-snug: 1.3; --lh-body: 1.55; /* ---- Espaçamento (base 4px) ------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ---- Raio ------------------------------------------------------------- */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* ---- Sombra / elevação (dark) + glow ---------------------------------- */ --shadow-1: 0 1px 2px oklch(0 0 0 / 0.30), 0 2px 8px -4px oklch(0 0 0 / 0.40); --shadow-2: 0 4px 12px -4px oklch(0 0 0 / 0.45), 0 12px 32px -12px oklch(0 0 0 / 0.55); --shadow-3: 0 8px 24px -6px oklch(0 0 0 / 0.55), 0 24px 60px -16px oklch(0 0 0 / 0.65); --glow-primary: 0 0 0 1px color-mix(in oklch, var(--primary) 40%, transparent), 0 8px 30px -8px color-mix(in oklch, var(--primary) 35%, transparent); --glow-accent: 0 0 0 1px color-mix(in oklch, var(--accent) 40%, transparent), 0 8px 30px -8px color-mix(in oklch, var(--accent) 35%, transparent); /* ring de foco */ --ring: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in oklch, var(--primary) 70%, transparent); /* ---- Motion ----------------------------------------------------------- */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 120ms; --dur-base: 200ms; --dur-panel: 360ms; --dur-feed: 420ms; /* ---- z-index semântico ------------------------------------------------ */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-modal-backdrop: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; } /* ============================================================================ Tema claro — variante (o default exibido é o escuro) Mantém a tensão verdigris × cobre, superfícies claras editorial. ============================================================================ */ [data-theme="light"] { color-scheme: light; --bg: oklch(0.985 0.003 220); --surface-1: oklch(0.965 0.004 220); --surface-2: oklch(1 0 0); --surface-3: oklch(0.94 0.005 220); --border: oklch(0.89 0.006 220); --border-strong: oklch(0.82 0.008 220); --ink: oklch(0.24 0.012 220); --ink-2: oklch(0.42 0.012 220); --ink-3: oklch(0.54 0.012 220); --primary: oklch(0.62 0.12 184); --primary-strong: oklch(0.56 0.13 184); --primary-ink: oklch(0.99 0.01 184); --primary-soft: color-mix(in oklch, var(--primary) 12%, transparent); --accent: oklch(0.60 0.14 58); --accent-strong: oklch(0.54 0.15 58); --accent-ink: oklch(0.99 0.01 58); --accent-soft: color-mix(in oklch, var(--accent) 13%, transparent); --success: oklch(0.58 0.16 150); --success-soft: color-mix(in oklch, var(--success) 14%, transparent); --warning: oklch(0.66 0.15 75); --warning-soft: color-mix(in oklch, var(--warning) 16%, transparent); --danger: oklch(0.58 0.21 25); --danger-soft: color-mix(in oklch, var(--danger) 14%, transparent); --whats: oklch(0.56 0.15 150); --whats-soft: color-mix(in oklch, var(--whats) 14%, transparent); --viz-3: oklch(0.56 0.16 290); --viz-5: oklch(0.55 0.02 220); --shadow-1: 0 1px 2px oklch(0.2 0.02 220 / 0.08), 0 2px 8px -4px oklch(0.2 0.02 220 / 0.10); --shadow-2: 0 4px 12px -4px oklch(0.2 0.02 220 / 0.12), 0 12px 32px -12px oklch(0.2 0.02 220 / 0.14); --shadow-3: 0 8px 24px -6px oklch(0.2 0.02 220 / 0.16), 0 24px 60px -16px oklch(0.2 0.02 220 / 0.18); --glow-primary: 0 0 0 1px color-mix(in oklch, var(--primary) 35%, transparent), 0 8px 24px -10px color-mix(in oklch, var(--primary) 40%, transparent); --glow-accent: 0 0 0 1px color-mix(in oklch, var(--accent) 35%, transparent), 0 8px 24px -10px color-mix(in oklch, var(--accent) 40%, transparent); --ring: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in oklch, var(--primary) 60%, transparent); }