/* ============================================================================= Velvion Studio — Design Tokens Single source of truth for color, type, space, radius, motion, elevation. Consumed by system.css and all page stylesheets. ============================================================================= */ :root { /* ---------- COLOR — ATELIER palette (v3) ---------- */ /* Luxury-clinical × high-tech. Darker, warmer, more mineral. Variable names stable across versions; hex values evolved. */ /* Primary surfaces */ --vs-graphite: #0B0D10; /* Obsidian — warm near-black base */ --vs-graphite-2: #12151A; /* Velvet — elevated surface, silk finish */ --vs-graphite-3: #05070A; /* Abyss — deepest, backdrop gradients */ --vs-graphite-4: #1C2028; /* Pewter — card base, one level up */ --vs-canvas: #EAE8E3; /* Platinum — paper-soft primary text */ --vs-mint: #8FBFA5; /* Verdigris — aged mint, oxidized bronze tone */ /* Secondary palette */ --vs-signal: #A7D4E0; /* Quartz — mineral cool data accent */ --vs-cyan: #C9E6ED; /* Ice — soft accent */ --vs-copper: #D4A17A; /* Copper — warm human accent, skin imagery */ --vs-alloy: #DBD6CF; /* Alloy — warm neutral (retained) */ --vs-chrome: #B8BCB5; /* Silk — secondary text */ --vs-mist: #6D736F; /* Ash — muted text */ --vs-veil: #8A908D; /* Slate — subtle dividers, tertiary text */ /* Semantic status */ --vs-success: #8FBFA5; /* verdigris */ --vs-info: #A7D4E0; /* quartz */ --vs-warn: #E8B66F; /* amber — softened */ --vs-danger: #E07B5F; /* ember — warm critical */ /* Translucent verdigris — new rgba values */ --vs-mint-a04: rgba(143, 191, 165, .04); --vs-mint-a08: rgba(143, 191, 165, .08); --vs-mint-a12: rgba(143, 191, 165, .14); --vs-mint-a20: rgba(143, 191, 165, .22); --vs-mint-a30: rgba(143, 191, 165, .32); --vs-mint-a50: rgba(143, 191, 165, .50); /* Translucent quartz */ --vs-signal-a08: rgba(167, 212, 224, .08); --vs-signal-a15: rgba(167, 212, 224, .16); --vs-signal-a30: rgba(167, 212, 224, .30); /* Translucent copper — reserved for human moments */ --vs-copper-a08: rgba(212, 161, 122, .08); --vs-copper-a15: rgba(212, 161, 122, .16); --vs-copper-a30: rgba(212, 161, 122, .30); --vs-warn-a12: rgba(232, 182, 111, .14); --vs-danger-a12: rgba(224, 123, 95, .14); --vs-white-a03: rgba(255, 255, 255, .03); /* card base on dark */ --vs-white-a05: rgba(255, 255, 255, .05); /* hover on dark */ --vs-white-a08: rgba(255, 255, 255, .08); /* active on dark */ /* Semantic surface aliases */ --vs-bg: var(--vs-graphite); --vs-bg-elevated: var(--vs-graphite-2); --vs-bg-card: var(--vs-white-a03); --vs-bg-card-hover: var(--vs-white-a05); --vs-bg-accent: var(--vs-mint-a04); --vs-bg-warm: var(--vs-copper-a08); /* Semantic text aliases */ --vs-text: var(--vs-canvas); /* Platinum */ --vs-text-subtle: var(--vs-chrome); /* Silk — secondary */ --vs-text-muted: var(--vs-mist); /* Ash — muted */ --vs-text-quiet: var(--vs-veil); /* Slate — quieter tertiary */ --vs-text-accent: var(--vs-mint); /* Verdigris */ --vs-text-warm: var(--vs-copper); /* Copper — human moments */ /* Border aliases */ --vs-border: var(--vs-mint-a12); --vs-border-accent: var(--vs-mint-a20); --vs-border-strong: var(--vs-mint-a30); --vs-border-warm: var(--vs-copper-a30); /* ---------- TYPOGRAPHY (v3 — Atelier) ---------- */ /* Clash Display: expressive modern sans with tech edge, luxury presence */ /* General Sans: warm geometric UI face, highly readable, contemporary */ /* JetBrains Mono: reserved for rare technical moments only */ --vs-font-display: 'Clash Display', 'Inter Tight', 'Inter', system-ui, sans-serif; --vs-font-body: 'General Sans', 'Inter', system-ui, -apple-system, sans-serif; --vs-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Type scale — modular, 1.25 ratio above body, 1.125 below */ --vs-text-2xs: 10px; --vs-text-xs: 11px; --vs-text-sm: 13px; --vs-text-base: 15px; --vs-text-md: 17px; --vs-text-lg: 20px; --vs-text-xl: 26px; --vs-text-2xl: 32px; --vs-text-3xl: 40px; --vs-text-4xl: 52px; --vs-text-5xl: 72px; /* Fluid display sizes (hero, section titles) */ --vs-text-hero: clamp(32px, 5.5vw, 56px); --vs-text-section: clamp(26px, 4vw, 40px); /* Weights */ --vs-weight-regular: 400; --vs-weight-medium: 500; --vs-weight-semibold: 600; --vs-weight-bold: 700; --vs-weight-heavy: 900; /* Tracking (letter-spacing) */ --vs-track-tight: -1.5px; /* display headlines */ --vs-track-snug: -0.5px; /* large numbers */ --vs-track-normal: 0; --vs-track-wide: 0.5px; /* UI labels */ --vs-track-wider: 1.5px; /* section labels */ --vs-track-widest: 3px; /* logo wordmark, eyebrow */ /* Line heights */ --vs-leading-tight: 1.08; --vs-leading-snug: 1.2; --vs-leading-normal: 1.5; --vs-leading-body: 1.65; /* ---------- SPACING ---------- */ /* 4px base, geometric progression */ --vs-space-0: 0; --vs-space-1: 4px; --vs-space-2: 8px; --vs-space-3: 12px; --vs-space-4: 16px; --vs-space-5: 20px; --vs-space-6: 24px; --vs-space-8: 32px; --vs-space-10: 40px; --vs-space-12: 48px; --vs-space-16: 64px; --vs-space-20: 80px; --vs-space-24: 96px; --vs-space-32: 128px; /* ---------- LAYOUT ---------- */ --vs-container: 1120px; --vs-container-wide: 1280px; --vs-gutter: 20px; --vs-gutter-lg: 40px; /* ---------- RADIUS ---------- */ --vs-radius-xs: 4px; --vs-radius-sm: 6px; --vs-radius-md: 8px; --vs-radius-lg: 10px; --vs-radius-xl: 12px; --vs-radius-2xl: 16px; --vs-radius-3xl: 20px; --vs-radius-full: 999px; /* ---------- ELEVATION ---------- */ /* Elevation = translucent ring + radial light. No drop shadows. */ --vs-ring-subtle: inset 0 0 0 0.5px var(--vs-mint-a12); --vs-ring-base: inset 0 0 0 0.5px var(--vs-mint-a20); --vs-ring-strong: inset 0 0 0 1px var(--vs-mint-a30); --vs-glow-mint: 0 0 60px rgba(143, 191, 165, .18); --vs-glow-signal: 0 0 60px rgba(167, 212, 224, .18); --vs-glow-copper: 0 0 60px rgba(212, 161, 122, .18); --vs-glow-focus: 0 0 0 3px rgba(143, 191, 165, .30); /* ---------- MOTION ---------- */ --vs-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out */ --vs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* smooth */ --vs-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot */ --vs-dur-fast: 120ms; --vs-dur-base: 200ms; --vs-dur-slow: 400ms; --vs-dur-slowest: 800ms; /* ---------- Z-INDEX ---------- */ --vs-z-base: 1; --vs-z-raised: 10; --vs-z-nav: 100; --vs-z-sticky: 200; --vs-z-overlay: 500; --vs-z-modal: 1000; --vs-z-toast: 2000; /* ---------- GRID TEXTURE ---------- */ --vs-grid-size: 40px; --vs-grid-color: rgba(163, 213, 181, .3); --vs-grid-opacity: 0.03; /* ---------- DATA VISUALIZATION ---------- */ --vs-chart-1: var(--vs-mint); --vs-chart-2: var(--vs-signal); --vs-chart-3: var(--vs-veil); --vs-chart-4: var(--vs-warn); --vs-chart-5: var(--vs-cyan); --vs-chart-grid: rgba(163, 213, 181, .06); --vs-chart-axis: var(--vs-mist); } /* Numeric displays always use tabular figures for clean alignment */ .vs-tabular, .vs-metric, .vs-kpi-value { font-feature-settings: "tnum" 1, "cv01" 1; font-variant-numeric: tabular-nums; }