/* ════════════════════════════════════════════════════════════════════ TITAN DESIGN OS — TOKENS (ds-tokens.css) Fonte canônica: plataforma.html (HomeOS). REGRAS DESTE ARQUIVO: - Zero seletores de elemento, zero reset, zero estilo visível. - Só custom properties, @font-face, @keyframes e utilitárias .t-anim-*. - Linkar este arquivo em qualquer página é visualmente NO-OP até a página consumir os tokens (o :root inline da página sempre vence, porque vem DEPOIS na cascade). - Ordem de carga no : ds-tokens.css → ui-states.css → ds-components.css → \3c style> da página ════════════════════════════════════════════════════════════════════ */ /* ── FONTES DA MARCA ── */ @font-face { font-family: 'Roca One'; src: url('../fonts/roca-one.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Vintage Goods'; src: url('../fonts/vintage-goods.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ── TOKENS CANÔNICOS (cópia verbatim da HomeOS, tema dark) ── */ :root { --bg: oklch(9.5% .024 248deg); --bg2: oklch(12% .027 248deg); --bg3: oklch(14.5% .03 248deg); --bg4: oklch(17% .03 248deg); --surface: oklch(100% 0 0deg / .042); --surface-h: oklch(100% 0 0deg / .082); --border: oklch(100% 0 0deg / .09); --border-h: oklch(100% 0 0deg / .22); --text: oklch(88% .014 72deg); --text2: oklch(68% .011 72deg); --text3: oklch(48% .008 72deg); --red: oklch(42% .195 22deg); --red-h: oklch(36% .185 22deg); --red-gl: oklch(42% .195 22deg / .28); --red-glow: oklch(42% .195 22deg / .28); --green: oklch(57% .17 145deg); --green-h: oklch(50% .16 145deg); --green-gl: oklch(57% .17 145deg / .22); --nav-bg: oklch(12% .028 248deg / .96); --sidebar-bg: oklch(9.5% .024 248deg / .88); --card-bg: oklch(100% 0 0deg / .04); --sh-xs: 0 1px 2px oklch(0% 0 0deg / .55); --sh-sm: 0 2px 8px oklch(0% 0 0deg / .45),0 1px 3px oklch(0% 0 0deg / .6); --sh-md: 0 4px 20px oklch(0% 0 0deg / .45),0 1px 6px oklch(0% 0 0deg / .65); --sh-lg: 0 10px 48px oklch(0% 0 0deg / .5),0 2px 10px oklch(0% 0 0deg / .7); --sh-red: 0 4px 24px var(--red-gl),0 1px 4px oklch(0% 0 0deg / .5); --sh-green: 0 4px 22px var(--green-gl),0 1px 4px oklch(0% 0 0deg / .5); --shadow: var(--sh-lg); --shadow-red: var(--sh-red); --t: .25s cubic-bezier(.22,1,.36,1); --t-fast: .15s cubic-bezier(.22,1,.36,1); /* ── MARCA (promovidos do .main-wrap da HomeOS) ── */ --ink: #060911; --ink2: #0a0e1a; --cream: #ece6d8; --cream-2: #a9a394; --cream-3: #6c6759; --line: rgba(236,230,216,.09); --line-h: rgba(236,230,216,.2); --red-b: #e23744; --red-soft: rgba(193,18,31,.13); --red-line: rgba(193,18,31,.36); --red-glo: rgba(193,18,31,.55); --gold: #caa64e; --gold-2: #e6c878; --gold-soft: rgba(202,166,78,.1); --gold-line: rgba(202,166,78,.34); --green-os: #5fc77f; --green-soft:rgba(95,199,127,.12); --blue-2: #4ea8de; --blue-soft: rgba(78,168,222,.12); --blue-line: rgba(78,168,222,.3); /* ── TIPOGRAFIA ── */ --display: 'Roca One','Arial Black',sans-serif; --script: 'Vintage Goods',cursive; --fd: 'Roca One','Impact','Arial Black',sans-serif; /* alias esperado pelo ui-states.css */ --fb: 'Outfit','Helvetica Neue',Arial,sans-serif; /* alias esperado pelo ui-states.css */ /* ── RAIOS ── */ --r-xs: 9px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; /* ── MOTION ── */ --ease-os: cubic-bezier(.22,1,.36,1); --ease-spring: cubic-bezier(.34,1.45,.5,1); --easeOS: cubic-bezier(.22,1,.36,1); /* alias HomeOS */ --spring: cubic-bezier(.34,1.45,.5,1); /* alias HomeOS */ --tOS: .25s var(--easeOS); --dur-1: .15s; --dur-2: .25s; --dur-3: .45s; --dur-4: .7s; /* ── ACCENT DO DOMÍNIO (default = vermelho Titan) ── */ --accent: oklch(59% .19 22deg); --accent-soft: oklch(59% .19 22deg / .12); --accent-line: oklch(59% .19 22deg / .35); --accent-glow: oklch(59% .19 22deg / .45); } /* ── TEMA LIGHT (canônico HomeOS) ── */ :root[data-theme="light"] { --bg: oklch(97% .008 72deg); --bg2: oklch(95% .009 72deg); --bg3: oklch(93% .01 72deg); --bg4: oklch(91% .012 72deg); --surface: oklch(0% 0 0deg / .04); --surface-h: oklch(0% 0 0deg / .08); --border: oklch(0% 0 0deg / .1); --border-h: oklch(0% 0 0deg / .22); --text: oklch(18% .03 248deg); --text2: oklch(38% .025 248deg); --text3: oklch(58% .015 248deg); --red: oklch(42% .195 22deg); --red-h: oklch(36% .185 22deg); --red-gl: oklch(42% .195 22deg / .18); --red-glow: oklch(42% .195 22deg / .18); --green: oklch(50% .16 145deg); --green-h: oklch(44% .15 145deg); --green-gl: oklch(50% .16 145deg / .16); --nav-bg: oklch(97% .008 72deg / .97); --sidebar-bg: oklch(95% .009 72deg / .92); --card-bg: oklch(0% 0 0deg / .03); --sh-xs: 0 1px 3px oklch(0% 0 0deg / .12); --sh-sm: 0 2px 8px oklch(0% 0 0deg / .1),0 1px 3px oklch(0% 0 0deg / .14); --sh-md: 0 4px 20px oklch(0% 0 0deg / .1),0 1px 6px oklch(0% 0 0deg / .12); --sh-lg: 0 10px 48px oklch(0% 0 0deg / .12),0 2px 10px oklch(0% 0 0deg / .15); --sh-red: 0 4px 24px var(--red-gl),0 1px 4px oklch(0% 0 0deg / .08); --sh-green: 0 4px 22px var(--green-gl),0 1px 4px oklch(0% 0 0deg / .08); --shadow: var(--sh-lg); --shadow-red: var(--sh-red); /* marca no light (mesmos ajustes do .main-wrap light da HomeOS) */ --ink: #ece6d8; --ink2: #e3dcca; --cream: #131b2e; --cream-2: #3e4860; --cream-3: #8a8674; --line: rgba(13,22,40,.1); --line-h: rgba(13,22,40,.22); --gold-2: #a8842e; --gold-soft: rgba(168,132,46,.1); --gold-line: rgba(168,132,46,.32); --green-os: #2e9e58; --green-soft:rgba(46,158,88,.1); } /* ── ACCENTS POR DOMÍNIO (Design Complementar) ── Uso: … default (sem data-area) = vermelho Titan (treinos, biblioteca, temporada, notificações, perfil, configurações, home). */ html[data-area="fuel"] { /* Nutrição — verde energético */ --accent: oklch(72% .14 150deg); --accent-soft: oklch(72% .14 150deg / .12); --accent-line: oklch(72% .14 150deg / .35); --accent-glow: oklch(72% .14 150deg / .4); } html[data-area="evolucao"] { /* Evolução — dourado Titan */ --accent: oklch(74% .11 88deg); --accent-soft: oklch(74% .11 88deg / .12); --accent-line: oklch(74% .11 88deg / .35); --accent-glow: oklch(74% .11 88deg / .4); } html[data-area="social"] { /* Feed/Comunidade — roxo social */ --accent: oklch(63% .19 305deg); --accent-soft: oklch(63% .19 305deg / .12); --accent-line: oklch(63% .19 305deg / .35); --accent-glow: oklch(63% .19 305deg / .4); } html[data-area="edu"] { /* Educação — azul tecnológico */ --accent: oklch(70% .12 235deg); --accent-soft: oklch(70% .12 235deg / .12); --accent-line: oklch(70% .12 235deg / .35); --accent-glow: oklch(70% .12 235deg / .4); } html[data-area="diag"] { /* Diagnóstico — ciano científico */ --accent: oklch(76% .11 200deg); --accent-soft: oklch(76% .11 200deg / .12); --accent-line: oklch(76% .11 200deg / .35); --accent-glow: oklch(76% .11 200deg / .4); } html[data-area="coach"] { /* Titan Coach IA — magenta futurista */ --accent: oklch(62% .23 340deg); --accent-soft: oklch(62% .23 340deg / .12); --accent-line: oklch(62% .23 340deg / .35); --accent-glow: oklch(62% .23 340deg / .4); } /* light: accents escurecidos p/ contraste em fundo creme */ html[data-theme="light"][data-area="fuel"] { --accent: oklch(50% .14 150deg); --accent-soft: oklch(50% .14 150deg / .1); --accent-line: oklch(50% .14 150deg / .32); --accent-glow: oklch(50% .14 150deg / .25); } html[data-theme="light"][data-area="evolucao"] { --accent: oklch(56% .11 88deg); --accent-soft: oklch(56% .11 88deg / .1); --accent-line: oklch(56% .11 88deg / .32); --accent-glow: oklch(56% .11 88deg / .25); } html[data-theme="light"][data-area="social"] { --accent: oklch(48% .19 305deg); --accent-soft: oklch(48% .19 305deg / .1); --accent-line: oklch(48% .19 305deg / .32); --accent-glow: oklch(48% .19 305deg / .25); } html[data-theme="light"][data-area="edu"] { --accent: oklch(50% .12 235deg); --accent-soft: oklch(50% .12 235deg / .1); --accent-line: oklch(50% .12 235deg / .32); --accent-glow: oklch(50% .12 235deg / .25); } html[data-theme="light"][data-area="diag"] { --accent: oklch(52% .11 200deg); --accent-soft: oklch(52% .11 200deg / .1); --accent-line: oklch(52% .11 200deg / .32); --accent-glow: oklch(52% .11 200deg / .25); } html[data-theme="light"][data-area="coach"] { --accent: oklch(48% .23 340deg); --accent-soft: oklch(48% .23 340deg / .1); --accent-line: oklch(48% .23 340deg / .32); --accent-glow: oklch(48% .23 340deg / .25); } /* hook por CONTAINER: superfícies do Coach IA dentro de outras páginas (chat, chips de platô) sem trocar o data-area da página inteira */ .t-area-coach { --accent: oklch(62% .23 340deg); --accent-soft: oklch(62% .23 340deg / .12); --accent-line: oklch(62% .23 340deg / .35); --accent-glow: oklch(62% .23 340deg / .4); } html[data-theme="light"] .t-area-coach { --accent: oklch(48% .23 340deg); --accent-soft: oklch(48% .23 340deg / .1); --accent-line: oklch(48% .23 340deg / .32); --accent-glow: oklch(48% .23 340deg / .25); } /* ── MOTION SYSTEM (só transform/opacity — performance Android) ── */ @keyframes t-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-scale-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } } @keyframes t-ping { 75%, 100% { transform: scale(2.2); opacity: 0; } } /* stagger: style="--ti:N" (N = índice do item) */ .t-anim-up { animation: t-fade-up var(--dur-3,.45s) var(--ease-os) both; animation-delay: calc(var(--ti,0) * 60ms); } .t-anim-in { animation: t-fade-in var(--dur-3,.45s) var(--ease-os) both; animation-delay: calc(var(--ti,0) * 60ms); } .t-anim-scale { animation: t-scale-in var(--dur-2,.25s) var(--ease-os) both; animation-delay: calc(var(--ti,0) * 60ms); } @media (prefers-reduced-motion: reduce) { .t-anim-up, .t-anim-in, .t-anim-scale { animation: none; } }