// ========================================================= // CSS Custom Properties (theming light/dark) — acento morado // El arranca en data-theme="dark" (identidad EdC). // ========================================================= :root { color-scheme: light; --accent-100: #ece9fb; --accent-200: #cdc7f7; --accent-300: #a99ff2; --accent-400: #8577ec; --accent-500: #6c5ce7; --accent-600: #5b4bd6; --accent-700: #4c3cc4; --info: #6c8cff; --success: #4ade80; --warning: #fbbf24; --danger: #ff6b6b; --bg: #fafafa; --surface: #ffffff; --surface-2: #f2f3f4; --surface-3: #eaecf0; --text-1: #101216; --text-2: #636a77; --text-3: #7b8290; --border: #e2e3e7; --border-strong: #cfd2d9; --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.08); --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.12); --toast-success-bg: #ecfdf5; --toast-warning-bg: #fffbeb; --toast-danger-bg: #fef2f2; --toast-info-bg: #eff6ff; // CRM público (patrón CDL): el fondo de color de un bloque es un TINTE // semitransparente del color elegido, y la imagen de fondo de la página // va atenuada — en claro admiten más presencia que en oscuro. --block-tint: 20%; --page-bg-opacity: 0.2; // Fondos DINÁMICOS de bloque (presets token:* del campo común // `background`): DOS velos del COLOR DE SUPERFICIE del tema // (--surface, el fondo de tarjeta) — 60 y 80 %, el número del token es // su opacidad. Sobre la imagen de fondo de // página, un velo «re-acerca» el bloque a la superficie del tema: en // oscuro ennegrece, en claro emblanquece, y cuanto mayor el grado más // tapa la imagen. Se declaran UNA vez aquí (sirven a ambos temas): // var(--surface) se sustituye con el que gane en — el data-theme // del tema vive en el propio :root, así que el velo sigue al // claro/oscuro solo. El acento translúcido (--accent-soft) es el tercer // preset; BlockShell resuelve cualquier token a var(--) y ya // llegan translúcidos. --veil-60: color-mix(in srgb, var(--surface) 60%, transparent); --veil-80: color-mix(in srgb, var(--surface) 80%, transparent); --accent-soft: color-mix(in srgb, var(--accent-500) 20%, transparent); // LEGACY (velos de 0.5.11/0.5.12 retirados del picker): lo guardado con // ellos sigue renderizando igual. --veil-15: color-mix(in srgb, var(--surface) 15%, transparent); --veil-30: color-mix(in srgb, var(--surface) 30%, transparent); --veil-85: color-mix(in srgb, var(--surface) 85%, transparent); // LEGACY (presets de 0.5.10, retirados del picker en favor de los // velos): los grises translúcidos por grados sobre la base neutra slate // (#64748B). Sus custom properties se CONSERVAN para que lo guardado // con token:neutral* siga renderizando igual que cuando era preset. --neutral-soft: rgb(100 116 139 / 10%); --neutral: rgb(100 116 139 / 20%); --neutral-strong: rgb(100 116 139 / 32%); } [data-theme="dark"] { color-scheme: dark; --accent-100: #1e1b2e; --bg: #0f1115; --surface: #1a1d24; --surface-2: #20242d; --surface-3: #2b2f3a; --text-1: #e6e8ee; --text-2: #9aa0ad; --text-3: #7b8290; --border: #2b2f3a; --border-strong: #3a4150; --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.45); --toast-success-bg: #0d2818; --toast-warning-bg: #2a2008; --toast-danger-bg: #2a0e0e; --toast-info-bg: #0e1a2e; --block-tint: 12%; --page-bg-opacity: 0.1; // Los velos (--veil-*) NO se redeclaran: la definición de :root ya lee // este --surface oscuro. El acento translúcido sí baja de grado en oscuro. --accent-soft: color-mix(in srgb, var(--accent-500) 16%, transparent); // LEGACY (grises 0.5.10 retirados del picker): grados propios del oscuro. --neutral-soft: rgb(100 116 139 / 7%); --neutral: rgb(100 116 139 / 12%); --neutral-strong: rgb(100 116 139 / 22%); }