/* VelDev Design Tokens v0.0.1 — veldev-tokens.css */ /* * @veldev/tokens — Obsidian Emerald (Slice 0.5) * * Nomenclatura: --vd--[-variante] * Todos los valores viven aquí. Cero hex en componentes. * * Estructura: * 1. Primitivos de color — escala esmeralda + neutrales cálidos * 2. Roles semánticos — apuntan a primitivos * 3. Tipografía — familias, escala, pesos, line-heights * 4. Espaciado — escala 4px base * 5. Radius * 6. Sombras * 7. Overrides dark — [data-vd-theme="dark"] */ /* ═══════════════════════════════════════════════════════════════ 1. PRIMITIVOS DE COLOR ═══════════════════════════════════════════════════════════════ */ :root { /* ── Escala esmeralda (acento único de la marca) ─────────────── */ --vd-emerald-50: #ecfdf5; --vd-emerald-100: #d1fae5; --vd-emerald-200: #a7f3d0; --vd-emerald-300: #6ee7b7; --vd-emerald-400: #34d399; --vd-emerald-500: #10b981; --vd-emerald-600: #059669; --vd-emerald-700: #047857; --vd-emerald-800: #065f46; --vd-emerald-900: #064e3b; /* ── Neutrales cálidos (negro cálido de la marca) ────────────── */ --vd-neutral-0: #ffffff; --vd-neutral-50: #f9fafb; --vd-neutral-100: #f3f4f6; --vd-neutral-200: #e5e7eb; --vd-neutral-300: #d1d5db; --vd-neutral-400: #9ca3af; --vd-neutral-500: #6b7280; --vd-neutral-600: #4b5563; --vd-neutral-700: #374151; --vd-neutral-800: #1f2937; --vd-neutral-850: #242424; --vd-neutral-900: #1a1a1a; --vd-neutral-950: #111111; /* ── Error / rojo ────────────────────────────────────────────── */ --vd-red-400: #f87171; --vd-red-600: #dc2626; /* ═══════════════════════════════════════════════════════════════ 2. ROLES SEMÁNTICOS — LIGHT (default) ═══════════════════════════════════════════════════════════════ */ /* Fondos */ --vd-bg: var(--vd-neutral-50); /* #F9FAFB */ --vd-surface: var(--vd-neutral-0); /* #FFFFFF */ --vd-surface-2: var(--vd-neutral-100); /* #F3F4F6 */ /* Bordes */ --vd-border: var(--vd-neutral-200); /* #E5E7EB */ --vd-border-strong: var(--vd-neutral-300); --vd-border-accent: var(--vd-emerald-600); /* Texto */ --vd-text: var(--vd-neutral-950); /* #111111 */ --vd-muted: var(--vd-neutral-500); /* #6B7280 */ --vd-text-inverse: var(--vd-neutral-0); /* Acento primario — esmeralda emerald-700 (#047857) elegido en light: - Blanco sobre #047857 = 5.48:1 → WCAG AA PASS (vs 3.77 con emerald-600) - #047857 sobre #F9FAFB = 5.25:1 → WCAG AA PASS para texto/links */ --vd-primary: var(--vd-emerald-700); /* #047857 */ --vd-primary-hover: var(--vd-emerald-800); /* #065f46 */ --vd-on-primary: var(--vd-neutral-0); /* #FFFFFF — 5.48:1 sobre primary */ /* Estados semánticos */ --vd-success: var(--vd-emerald-700); /* #047857 */ --vd-error: var(--vd-red-600); /* #DC2626 */ /* ═══════════════════════════════════════════════════════════════ 3. TIPOGRAFÍA ═══════════════════════════════════════════════════════════════ */ /* Familias — los valores reales los inyecta next/font en layout.tsx */ --vd-font-heading: var(--font-outfit, 'Outfit', sans-serif); --vd-font-body: var(--font-ibm-plex-sans, 'IBM Plex Sans', sans-serif); --vd-font-mono: var(--font-ibm-plex-mono, 'IBM Plex Mono', monospace); /* Escala de tamaño — base 16px (1rem) */ --vd-text-xs: 0.75rem; /* 12px */ --vd-text-sm: 0.875rem; /* 14px */ --vd-text-base: 1rem; /* 16px */ --vd-text-lg: 1.125rem; /* 18px */ --vd-text-xl: 1.25rem; /* 20px */ --vd-text-2xl: 1.5rem; /* 24px */ --vd-text-3xl: 1.875rem; /* 30px */ --vd-text-4xl: 2.25rem; /* 36px */ /* Line heights */ --vd-leading-tight: 1.25; --vd-leading-snug: 1.375; --vd-leading-normal: 1.5; --vd-leading-relaxed: 1.625; /* Pesos */ --vd-font-normal: 400; --vd-font-medium: 500; --vd-font-semibold: 600; --vd-font-bold: 700; /* ═══════════════════════════════════════════════════════════════ 4. ESPACIADO — base 4px ═══════════════════════════════════════════════════════════════ */ --vd-space-1: 0.25rem; /* 4px */ --vd-space-2: 0.5rem; /* 8px */ --vd-space-3: 0.75rem; /* 12px */ --vd-space-4: 1rem; /* 16px */ --vd-space-5: 1.25rem; /* 20px */ --vd-space-6: 1.5rem; /* 24px */ --vd-space-8: 2rem; /* 32px */ --vd-space-10: 2.5rem; /* 40px */ --vd-space-12: 3rem; /* 48px */ --vd-space-16: 4rem; /* 64px */ --vd-space-20: 5rem; /* 80px */ --vd-space-24: 6rem; /* 96px */ /* ═══════════════════════════════════════════════════════════════ 5. RADIUS ═══════════════════════════════════════════════════════════════ */ --vd-radius-sm: 0.25rem; /* 4px */ --vd-radius-md: 0.5rem; /* 8px */ --vd-radius-lg: 0.75rem; /* 12px */ --vd-radius-xl: 1rem; /* 16px */ --vd-radius-2xl: 1.5rem; /* 24px */ --vd-radius-full: 9999px; /* ═══════════════════════════════════════════════════════════════ 6. SOMBRAS — sutiles en light, más pronunciadas en dark ═══════════════════════════════════════════════════════════════ */ --vd-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04); --vd-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05); --vd-shadow-lg: 0 10px 20px -4px rgb(0 0 0 / 0.09), 0 4px 8px -4px rgb(0 0 0 / 0.06); --vd-shadow-emerald: 0 0 0 3px rgb(5 150 105 / 0.20); } /* ═══════════════════════════════════════════════════════════════ 7. DARK OVERRIDES — [data-vd-theme="dark"] Solo se sobreescriben los roles semánticos y sombras. Primitivos son fijos — no cambian por tema. ═══════════════════════════════════════════════════════════════ */ [data-vd-theme="dark"] { /* Fondos */ --vd-bg: var(--vd-neutral-950); /* #111111 */ --vd-surface: var(--vd-neutral-900); /* #1A1A1A */ --vd-surface-2: var(--vd-neutral-850); /* #242424 */ /* Bordes */ --vd-border: #2e2e2e; --vd-border-strong: var(--vd-neutral-600); --vd-border-accent: var(--vd-emerald-400); /* Texto */ --vd-text: var(--vd-neutral-50); /* #F9FAFB */ --vd-muted: var(--vd-neutral-400); /* #9CA3AF */ --vd-text-inverse: var(--vd-neutral-950); /* Acento primario — más claro en dark para mantener contraste */ --vd-primary: var(--vd-emerald-400); /* #34D399 */ --vd-primary-hover: var(--vd-emerald-300); /* #6EE7B7 */ --vd-on-primary: var(--vd-neutral-950); /* texto oscuro sobre emerald-400 */ /* Estados semánticos */ --vd-success: var(--vd-emerald-400); /* #34D399 */ --vd-error: var(--vd-red-400); /* #F87171 */ /* Sombras — opacidad mayor en dark para que sean perceptibles */ --vd-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.30); --vd-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.35); --vd-shadow-lg: 0 10px 20px -4px rgb(0 0 0 / 0.55), 0 4px 8px -4px rgb(0 0 0 / 0.40); --vd-shadow-emerald: 0 0 0 3px rgb(52 211 153 / 0.25); }