/* ============================================================ VILLA VIP Academia — Color tokens Primary cyan #00B6DD · Charcoal #36363A · Black · White Sampled directly from the official brand artwork. ============================================================ */ :root { /* ---- Brand core ---- */ --vv-cyan: #00b6dd; /* primary brand color */ --vv-cyan-600: #009fc4; /* hover / pressed */ --vv-cyan-700: #0088a8; /* deep */ --vv-cyan-400: #36c6e6; /* light accent */ --vv-cyan-300: #7bd9ee; /* tint */ --vv-cyan-100: #d6f3fa; /* wash / surface tint */ --vv-charcoal: #36363a; /* brand dark (logo "VIP") */ --vv-ink: #1b1b1f; /* near-black UI ink */ --vv-black: #000000; --vv-white: #ffffff; /* ---- Neutral ramp (cool charcoal family) ---- */ --vv-n-900: #18181b; --vv-n-800: #232327; --vv-n-700: #36363a; --vv-n-600: #4d4d54; --vv-n-500: #6c6c74; --vv-n-400: #9a9aa2; --vv-n-300: #c5c5cc; --vv-n-200: #e2e2e7; --vv-n-100: #f0f0f3; --vv-n-50: #f7f7f9; /* ---- Semantic status ---- */ --vv-success: #1eb980; --vv-warning: #f5a524; --vv-danger: #e5484d; --vv-info: var(--vv-cyan); /* ============================================================ SEMANTIC ALIASES — light surface (default) ============================================================ */ --color-bg: var(--vv-n-50); --color-surface: var(--vv-white); --color-surface-2: var(--vv-n-100); --color-surface-tint: var(--vv-cyan-100); --color-surface-dark: var(--vv-ink); --color-border: var(--vv-n-200); --color-border-strong: var(--vv-n-300); --color-text: var(--vv-ink); --color-text-muted: var(--vv-n-500); --color-text-subtle: var(--vv-n-400); --color-text-invert: var(--vv-white); --color-primary: var(--vv-cyan); --color-primary-hover: var(--vv-cyan-600); --color-primary-press: var(--vv-cyan-700); --color-on-primary: var(--vv-white); --color-accent: var(--vv-charcoal); --color-on-accent: var(--vv-white); --color-focus-ring: color-mix(in srgb, var(--vv-cyan) 45%, transparent); } /* ============================================================ DARK SURFACE scope — the brand's energetic “gym” mode. Apply class="vv-dark" on any container (or ). ============================================================ */ .vv-dark { --color-bg: var(--vv-n-900); --color-surface: var(--vv-n-800); --color-surface-2: var(--vv-n-700); --color-surface-tint: color-mix(in srgb, var(--vv-cyan) 16%, var(--vv-n-800)); --color-surface-dark: var(--vv-black); --color-border: color-mix(in srgb, var(--vv-white) 10%, transparent); --color-border-strong: color-mix(in srgb, var(--vv-white) 20%, transparent); --color-text: var(--vv-n-50); --color-text-muted: var(--vv-n-400); --color-text-subtle: var(--vv-n-500); --color-text-invert: var(--vv-ink); --color-on-primary: var(--vv-white); --color-accent: var(--vv-cyan); --color-on-accent: var(--vv-ink); }