/* ============================================================ ONE-PERSON STUDIO — DESIGN TOKENS Caderno de engenharia. Preto + branco como base, verde como assinatura, dourado como detalhe raro de carimbo. Referências: cadernos técnicos manuscritos (giz/caneta branca sobre papel escuro), diagramas de Venn ONE·PERSON·STUDIO, ilustração tipo atlas científico, retrato com luz verde dura. ------------------------------------------------------------ Camada 1 — Primitivos (carbon · vellum · moss · ochre · semânticas de função) Camada 2 — Semânticos (dark = padrão; light funcional, não estéril) Prefixo: --ops- (One-Person Studio — e também "operações": o estúdio como sistema operacional.) ============================================================ */ :root { /* ---------------------------------------------------------- 1. NEUTROS ESCUROS — "Carbon" (grafite, viés frio) Frio e neutro de propósito — o oposto do sépia quente da Tess Society. Isto é grafite de lapiseira técnica, não couro. ---------------------------------------------------------- */ --ops-carbon-50: #EFF0F0; --ops-carbon-100: #DDDEDF; --ops-carbon-200: #BFC2C4; --ops-carbon-300: #9CA0A5; --ops-carbon-400: #797F86; --ops-carbon-500: #5B6067; --ops-carbon-600: #43474C; --ops-carbon-700: #2F3237; --ops-carbon-800: #222528; --ops-carbon-850: #1A1C1E; --ops-carbon-900: #131416; --ops-carbon-950: #0D0E0F; --ops-carbon-975: #070808; /* preto de caderno — base dark */ --ops-black: #000000; --ops-white: #FFFFFF; /* ---------------------------------------------------------- 2. NEUTROS CLAROS — "Vellum" (papel vegetal de desenho) Hierarquia de texto sobre o dark + superfícies do light. Vellum = papel translúcido de prancheta, não pergaminho. ---------------------------------------------------------- */ --ops-vellum-50: #FFFFFF; /* branco puro */ --ops-vellum-100: #F7F7F8; --ops-vellum-200: #EDEDEE; --ops-vellum-300: #DDDEDF; --ops-vellum-400: #C8C9CB; --ops-vellum-500: #B0B2B5; --ops-vellum-600: #999B9F; --ops-vellum-700: #808489; /* ---------------------------------------------------------- 3. ACENTO PRIMÁRIO — "Moss" (verde musgo vivo) O coração da paleta. Matiz caminha de 147° (musgo, extremo escuro) a 156° (sinal, extremo claro); saturação nunca cai abaixo de ~45% em nenhum estágio — é o que evita o problema "verde morto" (referência Vigília, ~23% de saturação plana). ---------------------------------------------------------- */ --ops-moss-50: #EBF9F2; --ops-moss-100: #D5F1E2; --ops-moss-200: #A8E1C2; --ops-moss-300: #76CBA1; --ops-moss-400: #3EBB81; --ops-moss-500: #239561; /* base — o verde da marca */ --ops-moss-600: #18774C; --ops-moss-700: #115A37; --ops-moss-800: #0D4529; --ops-moss-900: #0A2E1B; --ops-moss-950: #071F12; --ops-moss-975: #05140C; /* Pares fixos de contraste para botão/preenchimento — não trocam com o tema (moss-400 e moss-800 são primitivos, o par de texto é sempre o mesmo). Existem porque moss-500 + texto preto (5.29:1) é o mínimo aceitável, não o ideal — estes dois dão folga real (nível AAA): accent-light → fundo claro, texto preto (moss-400 × carbon-975 = 8.24:1) accent-strong → fundo escuro, texto branco (moss-800 × vellum-50 = 11.05:1) */ --ops-accent-light: var(--ops-moss-400); --ops-on-accent-light: var(--ops-carbon-975); --ops-accent-strong: var(--ops-moss-800); --ops-on-accent-strong: var(--ops-vellum-50); /* ---------------------------------------------------------- 4. ACENTO SECUNDÁRIO — "Ochre" (dourado raro de carimbo) Usado com extrema parcimônia: carimbo, filete, marca de conquista pontual. Nunca área grande, nunca cor dominante. ---------------------------------------------------------- */ --ops-ochre-100: #ECE3CA; --ops-ochre-300: #D1B775; --ops-ochre-500: #A68330; /* base */ --ops-ochre-600: #836521; --ops-ochre-700: #5E4817; /* ---------------------------------------------------------- 5. HUES DE FUNÇÃO — vocabulário literal de desenho técnico hazard = fita de sinalização · redline = correção a caneta vermelha · cyanotype = o azul do processo químico que deu origem ao termo "blueprint". Usadas só em estados de sistema. ---------------------------------------------------------- */ --ops-hazard-300: #E6C489; --ops-hazard-500: #DD992C; /* warning */ --ops-hazard-700: #93631A; --ops-redline-300: #E6A399; --ops-redline-500: #CA442F; /* danger */ --ops-redline-700: #832C21; --ops-cyanotype-300: #9DC4DD; --ops-cyanotype-500: #3D81A9; /* info */ --ops-cyanotype-700: #25526A; /* Pares fixos de contraste para botão semântico — mesmo raciocínio do par moss (accent-light/accent-strong): o stop 300 de cada hue sempre entra com texto preto, o 700 sempre com texto branco, primitivos, não trocam com o tema. Use para exclusão (danger), aviso (warning) e informação (info) — nunca para ação primária, esse papel é do verde. warning-light → hazard-300 × carbon-975 = 12.05:1 (AAA) warning-strong → hazard-700 × vellum-50 = 5.20:1 (AA — melhor par possível nesse hue) danger-light → redline-300 × carbon-975 = 9.61:1 (AAA) danger-strong → redline-700 × vellum-50 = 8.95:1 (AAA) info-light → cyanotype-300 × carbon-975 = 10.86:1 (AAA) info-strong → cyanotype-700 × vellum-50 = 8.42:1 (AAA) */ --ops-warning-light: var(--ops-hazard-300); --ops-on-warning-light: var(--ops-carbon-975); --ops-warning-strong: var(--ops-hazard-700); --ops-on-warning-strong: var(--ops-vellum-50); --ops-danger-light: var(--ops-redline-300); --ops-on-danger-light: var(--ops-carbon-975); --ops-danger-strong: var(--ops-redline-700); --ops-on-danger-strong: var(--ops-vellum-50); --ops-info-light: var(--ops-cyanotype-300); --ops-on-info-light: var(--ops-carbon-975); --ops-info-strong: var(--ops-cyanotype-700); --ops-on-info-strong: var(--ops-vellum-50); /* ---------------------------------------------------------- 6. LUZ & TEXTURA (a assinatura — grid, não gradiente) Papel milimetrado, vinheta de registro, grão de papel e o brilho de giz/caneta branca por trás de uma anotação manual. ---------------------------------------------------------- */ --ops-grid-size: 28px; --ops-graph-dark: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); --ops-graph-light: linear-gradient(rgba(7,8,8,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(7,8,8,.06) 1px, transparent 1px); --ops-vignette-tech: radial-gradient(120% 120% at 50% 38%, transparent 60%, rgba(0,0,0,.50) 100%); --ops-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --ops-glow-pen: 0 0 1px rgba(255,255,255,.55), 0 0 18px rgba(255,255,255,.20); --ops-glow-moss: 0 0 0 1px rgba(35,149,97,.40), 0 10px 32px rgba(35,149,97,.22); --ops-glow-moss-lg:0 0 0 1px rgba(35,149,97,.45), 0 18px 56px rgba(35,149,97,.30); /* Gradiente é exceção rara, não vocabulário — só estes dois usos aprovados: um facho de luz atrás de um wordmark/hero, e o preenchimento de um ícone de app/produto. Fora daqui, prefira grid + cor sólida. */ --ops-gradient-beam: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(35,149,97,.28) 0%, rgba(35,149,97,0) 68%); --ops-gradient-icon: linear-gradient(155deg, var(--ops-moss-600), var(--ops-moss-800)); /* ---------------------------------------------------------- 7. TIPOGRAFIA — cinco vozes (+ alternativas opcionais) Wordmark/h1 · título de seção · editorial/UI · dados · manuscrita Manrope assumiu corpo/UI/botões e título de seção (mais peso), aproximando o sistema da landing page de referência. Space Grotesk cobre o wordmark e h1/display. IBM Plex Sans segue disponível como alternativa pontual — não foi removida. Nav e botões de topbar usam --ops-font-sans (não mono) — são interface, não dado/metadado. ---------------------------------------------------------- */ --ops-font-display: "Space Grotesk", "Archivo", system-ui, sans-serif; /* wordmark + h1/display */ --ops-font-heading: "Manrope", "Space Grotesk", system-ui, sans-serif; /* títulos de seção/card — mais peso que o corpo */ --ops-font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; /* editorial + UI + botões + nav — padrão atual */ --ops-font-sans-alt: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* alternativa opcional p/ casos técnicos */ --ops-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* só dado/metadado: hex, timestamp, medida */ --ops-font-hand: "Excalifont", "Segoe Script", cursive; /* manuscrita — uso principal (traço solto de whiteboard/diagrama, peso único; @font-face — não é Google Fonts) */ --ops-font-hand-alt1:"Architects Daughter", "Segoe Script", cursive; /* alternativa — traço técnico, ângulo de rascunho de prancheta */ --ops-font-hand-alt2:"Caveat", "Segoe Script", cursive; /* assinaturas e locais específicos — não é mais o padrão geral */ --ops-text-overline: 0.6875rem; /* 11 */ --ops-text-caption: 0.75rem; /* 12 */ --ops-text-sm: 0.875rem; /* 14 */ --ops-text-base: 1rem; /* 16 */ --ops-text-lg: 1.125rem; /* 18 */ --ops-text-h4: 1.5rem; /* 24 */ --ops-text-h3: 1.875rem; /* 30 */ --ops-text-h2: 2.5rem; /* 40 */ --ops-text-h1: 3.375rem; /* 54 */ --ops-text-display: 4.5rem; /* 72 */ --ops-text-display-lg: 6.5rem; /* 104 */ --ops-weight-regular: 400; --ops-weight-medium: 500; --ops-weight-semibold: 600; --ops-weight-bold: 700; --ops-weight-extrabold: 800; /* títulos em Manrope — "mais peso" que o corpo */ --ops-leading-none: 1.0; --ops-leading-tight: 1.15; --ops-leading-heading: 1.25; --ops-leading-normal: 1.55; --ops-leading-relaxed: 1.75; --ops-tracking-tight: -0.01em; --ops-tracking-normal: 0em; --ops-tracking-wide: 0.04em; --ops-tracking-label: 0.08em; /* overlines, mono labels */ --ops-tracking-wider: 0.12em; --ops-tracking-stencil: 0.18em; /* wordmark / titulação */ /* ---------------------------------------------------------- 8. ESPAÇO (grid base 4px) · raio · borda Raio contido: a régua desenha cantos precisos, não macios. ---------------------------------------------------------- */ --ops-space-1: 0.25rem; --ops-space-2: 0.5rem; --ops-space-3: 0.75rem; --ops-space-4: 1rem; --ops-space-5: 1.25rem; --ops-space-6: 1.5rem; --ops-space-8: 2rem; --ops-space-10: 2.5rem; --ops-space-12: 3rem; --ops-space-16: 4rem; --ops-space-20: 5rem; --ops-space-24: 6rem; --ops-space-32: 8rem; --ops-radius-none: 0; --ops-radius-sm: 3px; --ops-radius-md: 6px; --ops-radius-lg: 10px; --ops-radius-xl: 16px; --ops-radius-pill: 999px; --ops-border-hairline: 1px; --ops-border-thick: 1.5px; --ops-border-ruler: 2px; /* borda de destaque — cartão-régua */ /* ---------------------------------------------------------- 9. ELEVAÇÃO — sombra contida (blueprints são planos) ---------------------------------------------------------- */ --ops-shadow-sm: 0 1px 2px rgba(0,0,0,.35); --ops-shadow-md: 0 6px 20px rgba(0,0,0,.40); --ops-shadow-lg: 0 18px 44px rgba(0,0,0,.50); /* ---------------------------------------------------------- 10. MOVIMENTO — preciso, mecânico (régua, não câmera lenta) Mais rápido que um sistema cinematográfico: um traçador que acerta o ponto do grid, não uma dissolução de luz de vela. ---------------------------------------------------------- */ --ops-duration-fast: 120ms; --ops-duration-base: 200ms; --ops-duration-slow: 360ms; --ops-ease-draft: cubic-bezier(0.16, 1, 0.3, 1); /* assinatura — assentamento preciso */ --ops-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* ========================================================== SEMÂNTICOS — TEMA DARK (padrão / aplicação preferida) ========================================================== */ --ops-bg-page: var(--ops-carbon-975); --ops-surface: var(--ops-carbon-950); --ops-surface-raised: var(--ops-carbon-850); --ops-surface-sunken: var(--ops-black); --ops-text-primary: var(--ops-vellum-100); --ops-text-secondary: var(--ops-vellum-400); --ops-text-tertiary: var(--ops-vellum-600); --ops-text-inverse: var(--ops-carbon-950); --ops-border: rgba(255,255,255,.10); --ops-border-strong: rgba(255,255,255,.20); --ops-graph: var(--ops-graph-dark); --ops-rule-accent: var(--ops-moss-500); --ops-accent: var(--ops-moss-500); --ops-accent-hover: var(--ops-moss-400); --ops-accent-active: var(--ops-moss-600); --ops-accent-text: var(--ops-moss-300); --ops-accent-soft: rgba(35,149,97,.14); --ops-on-accent: var(--ops-carbon-975); --ops-secondary: var(--ops-ochre-500); --ops-secondary-text: var(--ops-ochre-300); --ops-secondary-soft: rgba(166,131,48,.14); --ops-on-secondary: var(--ops-carbon-975); --ops-success: var(--ops-moss-400); --ops-success-soft: rgba(35,149,97,.16); --ops-info: var(--ops-cyanotype-300); --ops-info-soft: rgba(61,129,169,.18); --ops-warning: var(--ops-hazard-300); --ops-warning-soft: rgba(221,153,44,.16); --ops-danger: var(--ops-redline-300); --ops-danger-soft: rgba(202,68,47,.18); --ops-focus-ring: var(--ops-moss-400); --ops-shadow: var(--ops-shadow-md); } /* ============================================================ SEMÂNTICOS — TEMA LIGHT (funcional: vellum + tinta de carbono) Não é um "dark invertido" estéril — mantém o grid e o peso do traço, só troca o papel de escuro para claro. ============================================================ */ [data-theme="light"] { --ops-bg-page: var(--ops-vellum-100); --ops-surface: var(--ops-vellum-50); --ops-surface-raised: #FFFFFF; --ops-surface-sunken: var(--ops-vellum-200); --ops-text-primary: var(--ops-carbon-900); --ops-text-secondary: var(--ops-carbon-600); --ops-text-tertiary: var(--ops-carbon-500); --ops-text-inverse: var(--ops-vellum-50); --ops-border: var(--ops-carbon-200); --ops-border-strong: var(--ops-carbon-300); --ops-graph: var(--ops-graph-light); --ops-rule-accent: var(--ops-moss-700); --ops-accent: var(--ops-moss-700); --ops-accent-hover: var(--ops-moss-800); --ops-accent-active: var(--ops-moss-900); --ops-accent-text: var(--ops-moss-800); --ops-accent-soft: rgba(17,90,55,.10); --ops-on-accent: var(--ops-vellum-50); --ops-secondary: var(--ops-ochre-700); --ops-secondary-text: var(--ops-ochre-700); --ops-secondary-soft: rgba(94,72,23,.10); --ops-on-secondary: var(--ops-vellum-50); --ops-success: var(--ops-moss-800); --ops-success-soft: rgba(13,69,41,.10); --ops-info: var(--ops-cyanotype-700); --ops-info-soft: rgba(37,82,106,.10); --ops-warning: var(--ops-hazard-700); --ops-warning-soft: rgba(147,99,26,.10); --ops-danger: var(--ops-redline-700); --ops-danger-soft: rgba(131,44,33,.10); --ops-focus-ring: var(--ops-moss-700); --ops-shadow: var(--ops-shadow-sm); }