/** * RemoteVibe design tokens * Source of truth for web; reference for desktop/mobile theming. * Pair with docs/design-system.md */ :root { color-scheme: light; /* Brand */ --rv-brand-teal: #0d9488; --rv-brand-teal-bright: #14b8a6; --rv-brand-teal-deep: #0f766e; --rv-brand-ink: #0b1220; --rv-brand-mist: #e8eef4; /* Surfaces */ --rv-bg: #f4f7fa; --rv-bg-elevated: #ffffff; --rv-bg-subtle: #e8eef4; --rv-surface: rgba(255, 255, 255, 0.62); --rv-surface-strong: rgba(255, 255, 255, 0.82); --rv-ink: #0b1220; --rv-ink-muted: #5a6578; --rv-ink-faint: #8b95a8; --rv-border: rgba(11, 18, 32, 0.1); --rv-border-strong: rgba(11, 18, 32, 0.18); /* Accent */ --rv-accent: #0d9488; --rv-accent-hover: #0f766e; --rv-accent-muted: rgba(13, 148, 136, 0.14); --rv-accent-contrast: #ffffff; --rv-focus-ring: rgba(13, 148, 136, 0.45); /* Semantic */ --rv-success: #0f9f6e; --rv-warning: #c98514; --rv-danger: #d64545; --rv-info: #2a7ab8; /* Glass recipe — WebTricks liquid glass: frost + saturate + specular rim */ --rv-glass-bg: rgba(255, 255, 255, 0.12); --rv-glass-bg-strong: rgba(255, 255, 255, 0.22); --rv-glass-border: rgba(255, 255, 255, 0.42); --rv-glass-highlight: rgba(255, 255, 255, 0.72); --rv-glass-sheen: linear-gradient( 135deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.1) 28%, transparent 58% ); --rv-glass-blur: 18px; --rv-glass-saturate: 1.85; --rv-glass-brightness: 1.1; --rv-glass-shadow: 0 12px 36px rgba(11, 18, 32, 0.14), 0 4px 14px rgba(13, 148, 136, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.62), inset 0 -1px 1px rgba(255, 255, 255, 0.28), inset 1px 0 1px rgba(255, 255, 255, 0.22), inset -1px 0 1px rgba(255, 255, 255, 0.18); /* Elevation */ --rv-shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05); --rv-shadow-md: 0 8px 24px rgba(11, 18, 32, 0.08); --rv-shadow-lg: 0 20px 48px rgba(11, 18, 32, 0.12); /* Radius */ --rv-radius-xs: 6px; --rv-radius-sm: 10px; --rv-radius-md: 14px; --rv-radius-lg: 20px; --rv-radius-xl: 28px; --rv-radius-pill: 999px; /* Spacing (4px base) */ --rv-space-1: 4px; --rv-space-2: 8px; --rv-space-3: 12px; --rv-space-4: 16px; --rv-space-5: 24px; --rv-space-6: 32px; --rv-space-7: 48px; --rv-space-8: 64px; --rv-space-9: 96px; /* Typography */ --rv-font-display: "Syne", "Manrope", sans-serif; --rv-font-ui: "Manrope", "Segoe UI", sans-serif; --rv-font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace; --rv-text-xs: 0.75rem; /* 12 */ --rv-text-sm: 0.875rem; /* 14 */ --rv-text-md: 1rem; /* 16 */ --rv-text-lg: 1.125rem; /* 18 */ --rv-text-xl: 1.375rem; /* 22 */ --rv-text-2xl: 1.75rem; /* 28 */ --rv-text-3xl: 2.25rem; /* 36 */ --rv-text-4xl: 3rem; /* 48 */ --rv-text-5xl: 3.75rem; /* 60 */ --rv-leading-tight: 1.15; --rv-leading-snug: 1.35; --rv-leading-normal: 1.5; --rv-tracking-display: -0.02em; --rv-tracking-ui: 0; /* Motion */ --rv-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --rv-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --rv-duration-fast: 140ms; --rv-duration-base: 240ms; --rv-duration-slow: 420ms; /* Layout */ --rv-content-max: 1120px; --rv-nav-height: 64px; --rv-safe-top: env(safe-area-inset-top, 0px); --rv-safe-right: env(safe-area-inset-right, 0px); --rv-safe-bottom: env(safe-area-inset-bottom, 0px); --rv-safe-left: env(safe-area-inset-left, 0px); } /* html specificity beats :root so dark tokens always win when chosen. Keep bare [data-theme="dark"] too for older cached CSS/HTML combos. */ html[data-theme="dark"], [data-theme="dark"] { color-scheme: dark; --rv-bg: #0a0f14; --rv-bg-elevated: #121820; --rv-bg-subtle: #161d27; --rv-surface: rgba(18, 24, 32, 0.55); --rv-surface-strong: rgba(18, 24, 32, 0.78); --rv-ink: #e8eef4; --rv-ink-muted: #9aa6b8; --rv-ink-faint: #6b778a; --rv-border: rgba(232, 238, 244, 0.1); --rv-border-strong: rgba(232, 238, 244, 0.18); --rv-accent: #2dd4bf; --rv-accent-hover: #5eead4; --rv-accent-muted: rgba(45, 212, 191, 0.16); --rv-accent-contrast: #042f2e; --rv-focus-ring: rgba(45, 212, 191, 0.5); --rv-success: #34d399; --rv-warning: #fbbf24; --rv-danger: #f87171; --rv-info: #60a5fa; --rv-glass-bg: rgba(12, 20, 30, 0.28); --rv-glass-bg-strong: rgba(16, 26, 38, 0.4); --rv-glass-border: rgba(255, 255, 255, 0.28); --rv-glass-highlight: rgba(255, 255, 255, 0.36); --rv-glass-sheen: linear-gradient( 135deg, rgba(255, 255, 255, 0.32) 0%, rgba(45, 212, 191, 0.1) 26%, transparent 58% ); --rv-glass-blur: 20px; --rv-glass-saturate: 2; --rv-glass-brightness: 1.12; --rv-glass-shadow: 0 16px 44px rgba(0, 0, 0, 0.48), 0 6px 18px rgba(45, 212, 191, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.42), inset 0 -1px 1px rgba(255, 255, 255, 0.14), inset 1px 0 1px rgba(255, 255, 255, 0.16), inset -1px 0 1px rgba(255, 255, 255, 0.1); --rv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --rv-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.4); --rv-shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55); } /* Utility: liquid glass — WebTricks frost/rim/sheen (+ Chromium refraction) */ .rv-glass, .glass-panel { position: relative; isolation: isolate; background: var(--rv-glass-bg); border: 1px solid var(--rv-glass-border); border-radius: var(--rv-radius-xl); box-shadow: var(--rv-glass-shadow); backdrop-filter: blur(var(--rv-glass-blur)) saturate(var(--rv-glass-saturate)) brightness(var(--rv-glass-brightness)); -webkit-backdrop-filter: blur(var(--rv-glass-blur)) saturate(var(--rv-glass-saturate)) brightness(var(--rv-glass-brightness)); } .rv-glass::after, .glass-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--rv-glass-sheen); mix-blend-mode: screen; } @supports (backdrop-filter: url(#rv-liquid)) { .rv-glass, .glass-panel { backdrop-filter: blur(4px) saturate(var(--rv-glass-saturate)) brightness(var(--rv-glass-brightness)) url(#rv-liquid); -webkit-backdrop-filter: blur(4px) saturate(var(--rv-glass-saturate)) brightness(var(--rv-glass-brightness)) url(#rv-liquid); } }