/* Design tokens of the cloud client, first stylesheet of every page. The layer order below is the whole cascade: a later layer wins regardless of specificity. legacy holds the CSS that predates the token system and shrinks phase by phase; components below it never override a theme rule that still lives there. See docs/PLANO-TEMAS-COMPONENTES.md. - --ref-*: palettes · --sys-*: semantic roles · --comp-*: one component - Themes set --sys-* and --comp-* on html[data-theme="…"]; components read only them. */ @layer reset, tokens, base, components, legacy, materials, themes, effects, utilities; @layer tokens { :root { /* Background */ --sys-bg-base: #07070e; --sys-bg-raised: #0d0d18; --sys-bg-high: #141424; --sys-bg-overlay: rgba(24, 24, 44, 0.72); /* Liquid Glass — Core Surfaces & Refraction */ --sys-surface: rgba(255, 255, 255, 0.045); --sys-border: rgba(255, 255, 255, 0.12); --sys-border-strong: rgba(255, 255, 255, 0.22); --sys-surface-hover: rgba(255, 255, 255, 0.085); --sys-blur: 22px; /* Liquid Glass — Specular Rim & Optical Depth */ --sys-surface-shell: linear-gradient( 135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(139, 92, 246, 0.05) 100% ); --sys-surface-plate: linear-gradient( 145deg, rgba(30, 30, 54, 0.72) 0%, rgba(16, 16, 30, 0.62) 100% ); --sys-surface-control: linear-gradient( 135deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.025) 100% ); --sys-elevation-2: inset 0 1px 0 0 rgba(255, 255, 255, 0.28), inset 1px 0 0 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 0 rgba(255, 255, 255, 0.06), 0 18px 48px rgba(0, 0, 0, 0.42); --sys-elevation-1: inset 0 1px 0 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 0 rgba(255, 255, 255, 0.05), 0 6px 20px rgba(0, 0, 0, 0.24); --sys-refraction: url(#liquid-refraction) blur(22px) saturate(175%); --sys-refraction-subtle: url(#liquid-refraction-subtle) blur(16px) saturate(160%); /* Accent — purple-blue liquid gradient */ --sys-accent: #8B5CF6; --sys-accent-strong: #6D28D9; --sys-accent-alt: #3B82F6; --sys-accent-gradient: linear-gradient(135deg, rgba(139, 92, 246, 0.92), rgba(59, 130, 246, 0.88)); --sys-accent-gradient-hover: linear-gradient(135deg, #9b6ff7, #5b9df7); /* Text */ --sys-on-surface: #f4f4fa; --sys-on-surface-variant: #a0a0ba; --sys-on-surface-muted: #666682; --sys-on-surface-accent: var(--sys-accent); /* Surfaces (Message Bubbles) */ --comp-bubble-own-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.22) 0%, rgba(59, 130, 246, 0.14) 100%); --comp-bubble-own-border: rgba(167, 139, 250, 0.32); --comp-bubble-other-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.03) 100%); --comp-bubble-other-border: rgba(255, 255, 255, 0.13); /* Status */ --sys-status-online: #34D399; --sys-status-danger: #EF4444; --sys-status-warning: #F59E0B; /* Spacing */ --sys-radius-sm: 10px; --sys-radius-md: 14px; --sys-radius-lg: 18px; --sys-radius-xl: 24px; --sys-radius-full: 50%; /* Typography */ --sys-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Transitions */ --sys-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sys-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --sys-motion-fast: 150ms; --sys-motion-normal: 250ms; --sys-motion-slow: 400ms; /* Layout */ --sys-header-height: 64px; --sys-input-height: 72px; --sys-sidebar-width: 260px; /* Component defaults (themes override them only to depart from the system) */ --comp-scrollbar-thumb: rgba(255, 255, 255, 0.08); --comp-scrollbar-thumb-hover: rgba(255, 255, 255, 0.14); --comp-button-on-accent: #fff; --comp-button-accent-border: rgba(255, 255, 255, 0.28); --comp-button-mini-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); --comp-button-mini-hover-border: rgba(255, 255, 255, 0.32); --comp-button-mini-hover-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 14px rgba(139, 92, 246, 0.35); --comp-button-float-hover-border: rgba(255, 255, 255, 0.35); --comp-button-send-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 4px 16px rgba(139, 92, 246, 0.28); --comp-button-send-hover-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 22px rgba(139, 92, 246, 0.42); --comp-button-cta-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.38), inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), 0 8px 26px rgba(139, 92, 246, 0.28); --comp-button-cta-hover-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.48), 0 12px 36px rgba(139, 92, 246, 0.42); --comp-button-dialog-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); --comp-button-dialog-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 4px 16px rgba(139, 92, 246, 0.28); --comp-button-dialog-primary-hover-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 20px rgba(139, 92, 246, 0.4); --comp-button-danger-fg: #fca5a5; --comp-button-danger-bg: rgba(239, 68, 68, 0.12); --comp-button-danger-border: rgba(239, 68, 68, 0.35); --comp-button-danger-hover-fg: #fff; --comp-button-danger-hover-bg: rgba(239, 68, 68, 0.28); --comp-button-danger-hover-border: rgba(239, 68, 68, 0.65); --comp-button-danger-soft-bg: rgba(239, 68, 68, 0.14); --comp-button-danger-soft-border: rgba(239, 68, 68, 0.32); --comp-dialog-backdrop: #0009; --comp-dialog-card-shadow: 0 28px 90px rgba(0, 0, 0, 0.55); --comp-pill-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); --comp-pill-active-border: rgba(167, 139, 250, 0.55); --comp-pill-active-bg: rgba(139, 92, 246, 0.22); --comp-pill-active-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); --comp-pill-mine-bg: rgba(139, 92, 246, 0.22); --comp-badge-fg: #fff; /* Panels of the modules (Mesa, jogos, tarefas, GitHub, ferramentas do chat). They follow the theme everywhere, the VS Code webview included. */ --comp-panel-bg: var(--sys-bg-raised); --comp-panel-fg: var(--sys-on-surface); --comp-panel-muted: var(--sys-on-surface-variant); --comp-panel-accent: var(--sys-accent); /* Text on --sys-accent-strong; themes whose strong accent is light set a dark one. */ --comp-panel-on-accent: var(--comp-button-on-accent); --comp-panel-accent-text: color-mix(in srgb, var(--comp-panel-accent) 70%, var(--comp-panel-fg)); --comp-panel-accent-tint: color-mix(in srgb, var(--comp-panel-accent) 10%, transparent); --comp-panel-accent-line: color-mix(in srgb, var(--comp-panel-accent) 55%, transparent); --comp-panel-line: color-mix(in srgb, var(--comp-panel-fg) 14%, transparent); --comp-panel-line-strong: color-mix(in srgb, var(--comp-panel-fg) 28%, transparent); --comp-panel-soft: color-mix(in srgb, var(--comp-panel-fg) 6%, transparent); --comp-panel-hover: color-mix(in srgb, var(--comp-panel-fg) 10%, transparent); --comp-panel-shadow: 0 20px 70px #0006; /* Domain colors: they mean something outside the theme (GitHub states, cards, suits), so themes keep them unless one chooses to adjust them. */ --domain-github-open: #1f883d; --domain-github-draft: #6e7781; --domain-github-merged: #8250df; --domain-github-closed: #cf222e; --domain-github-success: #2da44e; --domain-github-failure: #e5534b; --domain-github-pending: #d4a72c; --domain-github-on-state: #fff; } }