/* ========================================================================== DS v3 — Tokens de Profundidade Semântica (depth.css) Issue: #207 · Parent: #188 (FASE-0) ========================================================================== O Z-layer semântico é a maior inovação conceitual do DS v3. Profundidade não é z-index — é um sistema físico coerente onde cada nível define o conjunto COMPLETO de propriedades materiais: blur, background, shadow, border e border-radius. Regra universal: quanto mais alto o nível, mais desfoque, mais opacidade, maior sombra, maior reflexo especular, maior border-radius. depth-0 = fundo da página (não elevado, sem material) depth-1 = superfícies ao nível da página (cards, panels, tabelas) depth-2 = superfícies elevadas (dropdowns, popovers, side-panels) depth-3 = superfícies flutuantes (modais, drawers, sheets) depth-4 = superfícies críticas (toasts, alerts, spotlight, command) Depende de: color.css (--ds-bg-primary), glass.css (todos --ds-glass-*) Consumido por: utilities/glass.css, todos os componentes DS v3 ========================================================================== */ @layer ds-tokens { :root { /* ───────────────────────────────────────────────────────────────────── Z-INDEX SEMÂNTICO Garante stacking order correto sem conflitos. ───────────────────────────────────────────────────────────────────── */ --ds-z-base: 0; --ds-z-raised: 10; /* depth-1: cards, panels */ --ds-z-sidebar: 50; /* dark glass sidebar — acima de cards */ --ds-z-header: 60; /* frosted header — acima de sidebar no mobile */ --ds-z-overlay: 100; /* depth-2: dropdowns, popovers */ --ds-z-modal-backdrop: 200; /* backdrop de modal */ --ds-z-modal: 210; /* depth-3: modais, drawers */ --ds-z-toast: 300; /* depth-4: toasts, alerts */ --ds-z-spotlight: 400; /* depth-4: command palette, spotlight */ --ds-z-tooltip: 500; /* tooltips (sempre no topo) */ /* ───────────────────────────────────────────────────────────────────── DEPTH-0 — Fundo da Página Sem material glass. Background sólido da aplicação. ───────────────────────────────────────────────────────────────────── */ --ds-depth-0-blur: none; --ds-depth-0-bg: var(--ds-bg-primary); --ds-depth-0-shadow: 0 0 0 transparent; --ds-depth-0-border: none; --ds-depth-0-radius: 0; /* ───────────────────────────────────────────────────────────────────── DEPTH-1 — Superfícies ao Nível da Página Cards, painéis, tabelas. Material Ancorado. Blur moderado (16px), opacidade 84%. Sombra mínima: ambient sutil + inset specular no topo. ───────────────────────────────────────────────────────────────────── */ --ds-depth-1-blur: var(--ds-glass-filter-surface); --ds-depth-1-bg: var(--ds-glass-bg-200); --ds-depth-1-shadow: 0 1px 2px oklch(0% 0 0 / 0.05), /* ambient ultra-suave */ 0 2px 8px oklch(0% 0 0 / 0.06), /* direcional suave */ inset 0 1px 0 var(--ds-glass-border-hilight-sm); /* specular topo */ --ds-depth-1-border: 1px solid var(--ds-glass-border-default); --ds-depth-1-radius: var(--ds-radius-lg); /* 0.5rem — DS v2 compat */ /* ───────────────────────────────────────────────────────────────────── DEPTH-2 — Superfícies Elevadas Dropdowns, popovers, side-panels, tooltips grandes. Material Elevado. Blur forte (28px), opacidade 90%. Sombra pronunciada: 3 camadas + inset specular mais forte. ───────────────────────────────────────────────────────────────────── */ --ds-depth-2-blur: var(--ds-glass-filter-overlay); --ds-depth-2-bg: var(--ds-glass-bg-300); --ds-depth-2-shadow: 0 2px 4px oklch(0% 0 0 / 0.08), /* ambient */ 0 8px 20px oklch(0% 0 0 / 0.10), /* direcional principal */ 0 20px 40px oklch(0% 0 0 / 0.06), /* penumbra longa */ inset 0 1px 0 var(--ds-glass-border-hilight); /* specular forte */ --ds-depth-2-border: 1px solid var(--ds-glass-border-default); --ds-depth-2-radius: var(--ds-radius-xl); /* 1rem */ /* ───────────────────────────────────────────────────────────────────── DEPTH-3 — Superfícies Flutuantes Modais, drawers, bottom sheets. Material Flutuante. Blur máximo (48px), opacidade 88%. Sombra dramática: 4 camadas + inset specular + glow primário sutil. ───────────────────────────────────────────────────────────────────── */ --ds-depth-3-blur: var(--ds-glass-filter-modal); --ds-depth-3-bg: var(--ds-glass-bg-400); --ds-depth-3-shadow: 0 4px 6px oklch(0% 0 0 / 0.10), /* ambient próximo */ 0 16px 40px oklch(0% 0 0 / 0.14), /* direcional principal */ 0 40px 80px oklch(0% 0 0 / 0.10), /* penumbra profunda */ inset 0 1px 0 var(--ds-glass-border-hilight); /* specular forte */ --ds-depth-3-border: 1px solid var(--ds-glass-border-hilight-sm); --ds-depth-3-radius: var(--ds-radius-2xl); /* 1.5rem */ /* ───────────────────────────────────────────────────────────────────── DEPTH-4 — Superfícies Críticas Toasts, alerts globais, command palette, spotlight. Blur máximo + brightness boost. Opacidade 93%. Sombra máxima + anel accent + inset specular. ───────────────────────────────────────────────────────────────────── */ --ds-depth-4-blur: var(--ds-glass-filter-modal) brightness(1.08); --ds-depth-4-bg: var(--ds-glass-bg-500); --ds-depth-4-shadow: 0 8px 16px oklch(0% 0 0 / 0.15), /* ambient próximo — mais pesado */ 0 32px 80px oklch(0% 0 0 / 0.22), /* penumbra longa — maior que depth-3 */ 0 0 0 1px var(--ds-glass-border-accent), /* anel accent cyan */ inset 0 1px 0 var(--ds-glass-border-hilight); /* specular máximo */ --ds-depth-4-border: 1px solid var(--ds-glass-border-accent); --ds-depth-4-radius: var(--ds-radius-2xl); /* 1.5rem */ } /* ───────────────────────────────────────────────────────────────────── DARK THEME OVERRIDES Os backgrounds são automaticamente redirecionados para variantes dark pelo glass.css (--ds-glass-bg-* já contém os overrides dark). Aqui apenas ajustamos sombras para o ambiente escuro. ───────────────────────────────────────────────────────────────────── */ [data-theme="dark"], :root[data-theme-effective="dark"] { /* Sombras mais pesadas no dark — menos luz ambiente */ --ds-depth-1-shadow: 0 1px 2px oklch(0% 0 0 / 0.20), 0 2px 8px oklch(0% 0 0 / 0.22), inset 0 1px 0 var(--ds-glass-border-hilight-sm); --ds-depth-2-shadow: 0 2px 4px oklch(0% 0 0 / 0.25), 0 8px 20px oklch(0% 0 0 / 0.30), 0 20px 40px oklch(0% 0 0 / 0.20), inset 0 1px 0 var(--ds-glass-border-hilight); --ds-depth-3-shadow: 0 4px 6px oklch(0% 0 0 / 0.30), 0 16px 40px oklch(0% 0 0 / 0.30), /* era 0.40 — muito pesado sobre backdrop */ 0 40px 80px oklch(0% 0 0 / 0.22), inset 0 1px 0 var(--ds-glass-border-hilight); --ds-depth-4-shadow: 0 8px 16px oklch(0% 0 0 / 0.40), 0 24px 64px oklch(0% 0 0 / 0.50), 0 0 0 1px var(--ds-glass-border-accent), inset 0 1px 0 var(--ds-glass-border-hilight); } /* ───────────────────────────────────────────────────────────────────── PERFORMANCE BUDGET — data-glass-reduced Fallback de sombra sem backdrop-filter. Os backgrounds já são redirecionados pelo glass.css. ───────────────────────────────────────────────────────────────────── */ [data-glass-reduced] { --ds-depth-1-blur: none; --ds-depth-2-blur: none; --ds-depth-3-blur: none; --ds-depth-4-blur: none; } /* ───────────────────────────────────────────────────────────────────── ALTO CONTRASTE — prefers-contrast: more Remove inset specular (que pode reduzir contraste percebido) e reforça bordas sólidas por nível. ───────────────────────────────────────────────────────────────────── */ @media (prefers-contrast: more) { :root { --ds-depth-1-blur: none; --ds-depth-2-blur: none; --ds-depth-3-blur: none; --ds-depth-4-blur: none; /* Bordas sólidas para cada nível de profundidade */ --ds-depth-1-border: 1px solid oklch(0% 0 0 / 0.20); --ds-depth-2-border: 1px solid oklch(0% 0 0 / 0.30); --ds-depth-3-border: 2px solid oklch(0% 0 0 / 0.35); --ds-depth-4-border: 2px solid var(--ds-primary); /* Sombra simplificada sem camadas */ --ds-depth-1-shadow: 0 1px 3px oklch(0% 0 0 / 0.15); --ds-depth-2-shadow: 0 4px 12px oklch(0% 0 0 / 0.20); --ds-depth-3-shadow: 0 8px 24px oklch(0% 0 0 / 0.25); --ds-depth-4-shadow: 0 0 0 2px var(--ds-primary), 0 8px 24px oklch(0% 0 0 / 0.30); } } }